דף זה תורגם על ידי Cloud Translation API.

WebView באיכות פיקסל פרפקט

תאריך פרסום: 28 בפברואר 2014

יש כמה אפשרויות שאפשר להשתמש בהן כדי ליצור את הממשק המושלם ל-WebView.

הגדרת המטא תג של אזור התצוגה

מטא התג של אזור התצוגה הוא אחד מהתגים החשובים ביותר שצריך להוסיף לאפליקציית האינטרנט. בלי התג הזה, יכול להיות ש-WebView יפעל כאילו האתר שלכם מיועד לדפדפנים למחשב. כך הדף האינטרנטי מקבל רוחב גדול יותר (בדרך כלל 980px) ומותאם לרוחב של WebView. ברוב המקרים, התוצאה היא גרסה זעירה של סקירה כללית של הדף, והמשתמשים צריכים לבצע תנועות פנורמה ולהגדיל את התצוגה כדי לקרוא את התוכן.

אם רוצים שהרוחב של האתר יהיה 100% מהרוחב של WebView, צריך להגדיר את המטא תג של אזור התצוגה:

<meta name="viewport" content="width=device-width, initial-scale=1">

כדי לקבל שליטה רבה יותר על הפריסה של הדף, אפשר להגדיר את הרוחב לערך המיוחד device-width.

כברירת מחדל, WebView מגדיר את אזור התצוגה לרוחב המכשיר, במקום להגדיר כברירת מחדל אזור תצוגה למחשב. עם זאת, כדי שההתנהגות תהיה מהימנה ומבוקרת, מומלץ לכלול את המטא תג של אזור התצוגה.

הצגת אתרים שמתאימים למחשב

במקרים מסוימים, יכול להיות שתצטרכו להציג תוכן שלא מיועד למכשירים ניידים. לדוגמה, יכול להיות שתציגו תוכן שאתם לא שולטים בו. במקרה כזה, אפשר לאלץ את WebView להשתמש בחלון תצוגה בגודל של מחשב:

אם השיטות האלה לא מוגדרות וגם לא צוין אזור תצוגה, מערכת WebView תנסה להגדיר את רוחב אזור התצוגה על סמך גודל התוכן.

בנוסף, מומלץ להשתמש באלגוריתם הפריסה TEXT_AUTOSIZING, שמגדיל את גודל הגופן כדי שיהיה קל יותר לקרוא אותו במכשיר נייד. מידע נוסף זמין במאמר setLayoutAlgorithm.

שימוש בעיצוב רספונסיבי

עיצוב רספונסיבי הוא גישה לעיצוב ממשק שמשתנה בהתאם לגודל המסך.

יש כמה דרכים להטמיע עיצוב רספונסיבי. אחת מהן היא שאילתות @media, שמחילה CSS על רכיבים על סמך המאפיינים של המכשיר.

לדוגמה, נניח שאתם רוצים לעבור מפריסה אנכית לפריסה אופקית על סמך הכיוון. מגדירים את מאפייני ה-CSS לברירת מחדל לפורמט לאורך:

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

כדי לעבור לפריסה אופקית, משנים את המאפיין flex-direction בהתאם לכיוון:

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

אפשר גם לשנות את הפריסה בהתאם לרוחב המסך.

לדוגמה, שינוי רוחב הלחצן מ-100% לגודל קטן יותר ככל שגודל המסך הפיזי גדל.

button {
  display: block;
  width: 100%;
  ...
}

@media screen and (min-width: 500px) {
  button {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  }
}

אלה שינויים קטנים, אבל בהתאם לממשק המשתמש שלכם, שאילתות מדיה יכולות לעזור לכם לבצע שינויים גדולים יותר במראה של האפליקציה, תוך שמירה על אותו HTML.

תמונות חדות וברורות

גם מגוון הגדלים והדחיסות של המסכים מציב אתגרים לגבי תמונות. תמונות קטנות יותר צורכות פחות זיכרון וטוענות מהר יותר, אבל הן מטושטשות אם מגדילים אותן.

ריכזנו כאן כמה טיפים וטריקים שיעזרו לכם לוודא שהתמונות ייראו חדות וברורות בכל מסך:

שימוש ב-CSS לאפקטים שניתן להתאים לסדרי גודל שונים.
שימוש בגרפיקה וקטורית.
לספק תמונות ברזולוציה גבוהה.

שימוש ב-CSS לאפקטים שניתן להתאים לסדרי גודל שונים

כשהדבר אפשרי, השתמשו ב-CSS במקום בתמונות. יכול להיות שעיבוד של שילובים מסוימים של מאפייני CSS יהיה יקר. תמיד כדאי לבדוק את השילובים הספציפיים שבהם אתם משתמשים.

מידע נוסף על הצגת תוכן ראשוני (FCP), המדד שמציין את הזמן מהרגע שבו המשתמש מנווט לדף בפעם הראשונה ועד לרגע שבו חלק כלשהו מתוכן הדף מוצג במסך. 'תוכן' מתייחס לטקסט, לתמונות (כולל תמונות רקע), לרכיבי <svg> ולרכיבי <canvas> שאינם לבנים.

שימוש בגרפיקה וקטורית

Scalable Vector Graphics‏ (SVG) הם דרך מצוינת לספק תמונה שניתן לשנות את הגודל שלה. לתמונות שמתאימות לצורך גרפיקה וקטורית, קובצי SVG מספקים תמונות באיכות גבוהה עם גודל קובץ קטן מאוד.

לשלוח תמונות ברזולוציה גבוהה

משתמשים בתמונה שמתאימה למכשיר עם רזולוציית DPI גבוהה ומגדילים את התמונה באמצעות CSS. כך אפשר להציג את התמונה באיכות גבוהה במכשירים שונים. אם משתמשים בדחיסה גבוהה (הגדרת איכות נמוכה) בזמן יצירת התמונה, יכול להיות שאפשר לקבל תוצאות חזותיות טובות בגודל קובץ סביר.

לשיטה הזו יש כמה חסרונות פוטנציאליים: בתמונות עם דחיסת נתונים גבוהה עשויים להופיע פגמים חזותיים, לכן צריך להתנסות כדי לקבוע איזו רמת דחיסה מתאימה לכם. בנוסף, שינוי הגודל של התמונה ב-CSS יכול להיות פעולה יקרה.

אם דחיסת נתונים גבוהה לא מתאימה לצרכים שלכם, נסו את פורמט WebP, שמספק תמונה באיכות גבוהה עם גודל קובץ קטן יחסית. חשוב לספק חלופה לגרסאות של Android שבהן אין תמיכה ב-WebP.

בקרה פרטנית

במקרים רבים אי אפשר להשתמש בתמונה אחת לכל המכשירים. במקרה כזה, תוכלו לבחור תמונות שונות בהתאם לגודל ולצפיפות המסך. משתמשים בבקשות מדיה כדי לבחור תמונות רקע לפי גודל המסך וצפיפות הפיקסלים.

אפשר להשתמש ב-JavaScript כדי לשלוט באופן שבו תמונות נטענות, אבל הדבר מוסיף מורכבות.

שאילתות מדיה ודחיסות מסך

כדי לבחור תמונה על סמך צפיפות המסך, צריך להשתמש ביחידות dpi או dppx בשאילתת המדיה. היחידות dpi מייצגות נקודות לאינץ' ב-CSS, והיחידות dppx מייצגות נקודות לפסיק ב-CSS.

בטבלה הבאה אפשר לראות את הקשר בין dpi לבין dppx.

יחס הפיקסלים של המכשיר	דחיסות מסך כללית	נקודות לאינץ' ב-CSS (`dpi`)	נקודות לכל פיקסל CSS (`dppx`)
1x	MDPI	96`dpi`	1`dppx`
1.5x	HDPI	144`dpi`	1.5`dppx`
2	XHDPI	192`dpi`	2`dppx`

הקטגוריות הכלליות של דחיסות המסך מוגדרות על ידי Android, והן משמשות במקומות אחרים כדי להביע את דחיסות המסך (לדוגמה, https://screensiz.es).

תמונות רקע

אפשר להשתמש בשאילתות מדיה כדי להקצות תמונות רקע לאובייקטים. לדוגמה, אם יש לכם תמונה של לוגו בגודל 256px על 256px במכשיר עם יחס פיקסלים של 1.0, תוכלו להשתמש בכללי ה-CSS הבאים:

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

כדי להחליף את התמונה הזו בתמונה גדולה יותר במכשירים עם יחס פיקסלים של 1.5 (hdpi) ו-2.0 (xhdpi), אפשר להוסיף את הכללים הבאים:

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_384x384.png');
  }
}

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

לאחר מכן תוכלו למזג את הטכניקה הזו עם שאילתות מדיה אחרות, כמו min-width, ששימושית כשרוצים להביא בחשבון גורמים שונים של גורמי צורה.

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
    background-image: url('../images/html5_1024x1024.png');

    max-height: 512px;
    max-width: 512px;
  }
}

יכול להיות שתבחינו שהערך של max-height ו-max-width מוגדר ל-512px ברזולוציה 2ddpx, עם תמונה בגודל 1024x1024px. הסיבה לכך היא ש'פיקסל' ב-CSS מתייחס למעשה ליחס הפיקסלים של המכשיר (512px * 2 = 1024px).

מה דעתך על `<img/>`?

אין פתרון לבעיה הזו באינטרנט כיום. יש כמה הצעות, אבל הן לא זמינות בדפדפנים הנוכחיים או ב-WebView.

בינתיים, אם אתם יוצרים את ה-DOM ב-JavaScript, אתם יכולים ליצור כמה משאבי תמונות במבנה ספרייה מחושב:

images/
  mdpi/
    imagename.png
  hdpi/
    imagename.png
  xhdpi/
    imagename.png

לאחר מכן, משתמשים ביחס הפיקסלים כדי לנסות לאחזר את התמונה המתאימה ביותר:

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

לחלופין, אפשר לשנות את כתובת ה-URL הבסיסית של הדף כדי להגדיר את כתובות ה-URL היחסיות של התמונות.

<!doctype html>
<html class="no-js">
<head>
  <script>
    function getDensityDirectoryName() {
      if(!window.devicePixelRatio) {
          return 'mdpi';
      }

      if(window.devicePixelRatio > 1.5) {
          return 'xhdpi';
      } else if(window.devicePixelRatio > 1.0) {
          return 'hdpi';
      }

      return 'mdpi';
    }

    var baseUrl =
        'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
    document.write('<base href="'+baseUrl+'">');
  </script>

    ...
</head>
<body>
    ...
</body>
</html>

הגישה הזו מונעת את טעינת הדף ומאלצת להשתמש בנתיבים מוחלטים לכל המשאבים, כמו תמונות, סקריפטים וקובצי CSS, כי כתובת ה-URL הבסיסית מפנה לתיקייה ספציפית לצפיפות.