תמיכה במסכים שונים באפליקציות אינטרנט

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

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

אזור התצוגה
אזור התצוגה הוא האזור המלבני שמספק אזור שניתן להזזה לדף האינטרנט. שלך יכול לציין מספר מאפיינים של אזור תצוגה, כמו הגודל וקנה המידה הראשוני שלו. הדבר החשוב ביותר הוא רוחב אזור התצוגה, המגדיר את המספר הכולל של הפיקסלים האופקיים הזמינים נקודת מבט – מספר הפיקסלים הזמינים ב-CSS.
צפיפות המסך
במחלקה WebView וברוב דפדפני האינטרנט ב-Android ממירים את ערכי הפיקסלים של שירות ה-CSS לערכי פיקסלים בלתי תלויים בדחיסות, כך שדף האינטרנט שלך יופיע באותו גודל שניתן להבחין בו מסך עם צפיפות בינונית — בערך 160dpi. עם זאת, אם הגרפיקה היא אלמנט חשוב עיצוב אתרים, שימו לב לעומס שנוצר בצפיפות שונה. לדוגמה, תמונה ברוחב של 300 פיקסלים במסך של 320 dpi פיקסל. כתוצאה מכך, ייווצרו ארטיפקטים כמו טשטוש ותצוגת פיקסלים. כדי לשמור על פשטות, Android מתכווץ את הדחיסות הקטנה ביותר של המסך לכמה קטגוריות כלליות: קטן, בינוני וגדול. למידה מידע נוסף על דחיסות המסך, תמיכה בדחיסות פיקסלים שונה.

כדאי לעיין במקורות המידע שקשורים לנושא:

ציון המאפיינים של אזור התצוגה

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

נפוצים דפדפני אינטרנט ב-Android – כולל Chrome – מגדירים את אזור התצוגה לגודל גדול כברירת מחדל. _מצב אזור התצוגה הרחב_ הוא ברוחב של כ-980 פיקסלים. דפדפנים רבים גם מקטינים את התצוגה ניתן להציג כברירת מחדל את הרוחב המלא של אזור התצוגה, שנקרא _overview mode_.

אפשר להגדיר מאפיינים של אזור התצוגה של דף האינטרנט, כמו הרוחב והזום הראשוני רמה, באמצעות התג <meta name="viewport" ...> במסמך <head>.

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

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

לדוגמה, התג הבא <meta> מציין שרוחב אזור התצוגה תואם רוחב מסך המכשיר ושהאפשרות לשנות את מרחק התצוגה מושבתת:

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

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

טירגוט של דחיסות מכשירים באמצעות CSS

ב-WebView יש תמיכה ב--webkit-device-pixel-ratio, שהיא מדיה של CSS תכונה שמאפשרת ליצור סגנונות לדחיסות מסך ספציפית. הערך שמוגדר להחיל על חייבים להיות 0.75, 1 או 1.5, כדי לציין שהסגנונות מיועדים למכשירים עם ערך נמוך, בינוני או במסכים עם צפיפות גבוהה, בהתאמה.

ניתן ליצור גיליונות סגנונות נפרדים לכל צפיפות:

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

או לציין את הסגנונות השונים בגיליון סגנונות אחד:

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

לקבלת מידע נוסף על טיפול בדחיסות מסך שונה, במיוחד תמונות, תמונות DPI גבוה עבור דחיסות פיקסלים משתנה.

טירגוט לדחיסות המכשיר באמצעות JavaScript

ב-WebView יש תמיכה ב-window.devicePixelRatio, שהוא נכס DOM מאפשר להריץ שאילתה על הצפיפות של המכשיר הנוכחי. הערך של המאפיין הזה מציין את קנה המידה של המכשיר הנוכחי. אם הערך של window.devicePixelRatio הוא 1.0, המכשיר נחשב למכשיר עם צפיפות בינונית, ולא מתבצעת התאמה של קנה מידה כברירת מחדל. אם הוא 1.5, אז המכשיר נחשב למכשיר עם צפיפות גבוהה, וגודל הדף הוא פי 1.5 כברירת מחדל. אם הערך הוא 0.75, המכשיר נחשב למכשיר עם צפיפות נמוכה, והדף מותאם 0.75x כברירת מחדל.

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

לדוגמה, כך אפשר לשלוח שאילתה על דחיסות המכשיר באמצעות JavaScript:

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}