إتاحة استخدام شاشات مختلفة في تطبيقات الويب

نظرًا لتوفّر Android على أجهزة ذات مجموعة متنوعة من أحجام الشاشات وكثافة وحدات البكسل، يجب مراعاة هذه العوامل في تصميم الويب لديك كي يتم تحديد حجم صفحاتك بالشكل المناسب. يدعم WebView ميزات DOM وCSS والعلامة الوصفية لمساعدتك في عرض محتوى الويب بشكل مناسب.

عند استهداف صفحات الويب الخاصة بك للأجهزة التي تعمل بنظام التشغيل Android، هناك عاملان رئيسيان يجب أخذهما في الاعتبار:

إطار العرض
إطار العرض هو مساحة مستطيلة توفّر منطقة قابلة للرسم لصفحة الويب الخاصة بك. يمكنك تحديد عدة سمات لإطار العرض، مثل حجمها وحجمها الأولي. والأهم من ذلك هو عرض إطار العرض الذي يحدّد إجمالي عدد وحدات البكسل الأفقية المتاحة من وجهة نظر صفحة الويب، أي عدد وحدات بكسل CSS المتاحة.
كثافة الشاشة
تعمل فئة WebView ومعظم متصفّحات الويب على Android على تحويل قيم وحدات بكسل CSS إلى قيم وحدات بكسل مستقلة عن الكثافة، بحيث تظهر صفحة الويب بالحجم نفسه الذي يمكن ملاحظته على الشاشة المتوسطة الكثافة، أي حوالي 160 نقطة لكل بوصة. ومع ذلك، إذا كانت الرسومات عنصرًا مهمًا في تصميم الويب الخاص بك، ننصحك بالانتباه إلى الضبط الذي يحدث على كثافات مختلفة. على سبيل المثال، يتم تكبير صورة يبلغ عرضها 300 بكسل على شاشة بها 320 نقطة لكل بوصة، إذ تستخدم هذه الصورة المزيد من وحدات البكسل الفعلية لكل وحدة بكسل CSS. يمكن أن يؤدي ذلك إلى إنتاج عناصر مثل التمويه والتقطيع. ولتبسيط الأمر، يعمل نظام Android على تصغير معظم كثافة الشاشات الأصغر حجمًا إلى بضع فئات عامة: الصغيرة والمتوسطة والكبيرة. للاطّلاع على مزيد من المعلومات حول كثافة الشاشة، يمكنك قراءة مقالة إتاحة الكثافات المختلفة لوحدات البكسل.

ارجع إلى الموارد التالية ذات الصلة:

تحديد خصائص إطار العرض

إطار العرض هو المنطقة التي يتم فيها رسم صفحة الويب. على الرغم من أن المساحة الإجمالية المرئية لإطار العرض تتطابق مع حجم الشاشة عند تكبيرها بالكامل، فإن إطار العرض له أبعاد البكسل الخاصة به التي تجعلها متاحة لصفحة ويب. على سبيل المثال، فعلى الرغم من أن عرض شاشة الجهاز قد يبلغ 480 بكسل، إلا أن إطار العرض يمكن أن يبلغ 800 بكسل. ويسمح هذا لصفحة الويب المصممة بعرض 800 بكسل بالظهور بالكامل على الشاشة عندما يكون مقياس إطار العرض 1.0.

تضبط معظم متصفحات الويب على نظام التشغيل Android، بما في ذلك Chrome، إطار العرض على حجم كبير تلقائيًا. يبلغ عرض _وضع إطار العرض الواسع_ هذا حوالي 980 بكسل. يتم تصغير العديد من المتصفحات أيضًا إلى أقصى حد ممكن افتراضيًا لعرض العرض الكامل لإطار العرض، والمعروف باسم _وضع النظرة العامة_.

يمكنك تحديد خصائص إطار العرض لصفحة الويب، مثل العرض ومستوى التكبير أو التصغير الأولي، باستخدام علامة <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.75 ضعف تلقائيًا.

يعتمد المقياس الذي يطبّقه متصفِّح 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");
}