WebView بدقة رائعة

تاريخ النشر: 28 شباط (فبراير) 2014

هناك عدد من الخيارات التي يمكنك استخدامها لإنشاء الواجهة المثالية لWebView.

ضبط العلامة الوصفية لإطار العرض

العلامة الوصفية لإطار العرض هي من أهم العلامات التي يجب إضافتها إلى تطبيق الويب. فبدونها، قد يعمل WebView كما لو كان موقعك الإلكتروني مصمّمًا لمتصفّحات سطح المكتب. يؤدي ذلك إلى منح صفحة الويب عرضًا أكبر (عادةً 980 بكسل) وتغيير حجمها لتلائم عرض WebView. في معظم الحالات، يؤدي ذلك إلى عرض نسخة مختصرة وعامة من الصفحة تتطلّب من المستخدم التمرير والتكبير/التصغير لقراءة المحتوى.

إذا كنت تريد أن يكون عرض موقعك الإلكتروني% 100 من عرض WebView، اضبط العلامة الوصفية لإطار العرض:

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

اضبط العرض على القيمة الخاصة device-width للاستفادة من مزيد من التحكّم في تنسيق الصفحة.

يضبط WebView إطار العرض تلقائيًا على عرض الجهاز بدلاً من ضبطه تلقائيًا على إطار عرض لأجهزة الكمبيوتر المكتبي. ومع ذلك، للحصول على سلوك موثوق وقابل للتحكّم فيه، من أفضل الممارسات تضمين العلامة الوصفية لإطار العرض.

عرض المواقع الإلكترونية المتوافقة مع أجهزة الكمبيوتر المكتبي

في بعض الحالات، قد تحتاج إلى عرض محتوى غير مصمّم للأجهزة المتحرّكة. على سبيل المثال، قد تعرض محتوى لا تتحكم فيه. في هذه الحالة، يمكنك إجبار WebView على استخدام مساحة عرض بحجم أجهزة الكمبيوتر المكتبي:

• setUseWideViewPort(true)
• setLoadWithOverviewMode(true)

في حال عدم ضبط هذه الطرق وعدم تحديد إطار عرض، يحاول 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> غير البيضاء.

استخدام الرسومات المتّجه

الرسومات المتجهّة القابلة للتطوير (SVG) هي طريقة رائعة لتقديم صورة قابلة للتطوير. بالنسبة إلى الصور المناسبة للرسومات المتجهّة، يوفّر تنسيق SVG صورًا عالية الجودة بحجم ملفات صغير جدًا.

تقديم صور عالية الدقة

استخدِم صورة مناسبة لجهاز بدرجة كثافة عالية للنقاط وغيِّر حجم الصورة باستخدام CSS. بهذه الطريقة، يمكن عرض الصورة بجودة عالية على جميع الأجهزة. إذا كنت تستخدم ضغطًا بدرجة عالية (إعداد جودة منخفض) عند إنشاء الصورة، قد تتمكّن من تحقيق نتائج مرئية جيدة بحجم ملف معقول.

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

إذا لم يكن الضغط العالي مناسبًا لاحتياجاتك، جرِّب تنسيق WebP، الذي يقدّم صورة عالية الجودة بحجم ملف صغير نسبيًا. احرص على توفير بديل لإصدارات Android التي لا تتيح استخدام WebP.

التحكّم الدقيق

في العديد من الحالات، لا يمكنك استخدام صورة واحدة لجميع الأجهزة. في هذه الحالة، يمكنك اختيار صور مختلفة استنادًا إلى حجم الشاشة وكثافتها. استخدِم طلبات البحث عن الوسائط لاختيار صور الخلفية حسب حجم الشاشة وكثافتها.

يمكنك استخدام JavaScript للتحكّم في كيفية تحميل الصور، ولكنّ ذلك يزيد من التعقيد.

طلبات الاستعلام عن الوسائط وكثافة الشاشة

لاختيار صورة استنادًا إلى كثافة الشاشة، عليك استخدام وحدات dpi أو dppx في طلب البحث عن الوسائط. تمثّل وحدة dpi النقاط لكلّ بوصة في CSS، وتمثل dppx النقاط لكلّ بكسل في CSS.

في الجدول التالي، يمكنك الاطّلاع على العلاقة بين dpi وdppx.

نسبة وحدات البكسل على الجهاز	كثافة الشاشة بشكل عام	عدد النقاط لكل بوصة في CSS (dpi)	عدد النقاط لكل بكسل في CSS (dppx)
‫1x	MDPI	96dpi	1dppx
1.5x	نقطة عالية لكل بوصة (HDPI)	144dpi	1.5dppx
2	XHDPI	192dpi	2dppx

يحدِّد نظام Android مجموعات كثافة الشاشة العامة، ويتم استخدامها في أماكن أخرى للتعبير عن كثافة الشاشة (على سبيل المثال، https://screensiz.es).

صور الخلفية

يمكنك استخدام طلبات البحث عن الوسائط لتحديد صور الخلفية للعناصر. على سبيل المثال، إذا كانت لديك صورة شعار بحجم 256 بكسل × 256 بكسل على جهاز بنسبة بكسل ‏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 على 512 بكسل لدقة 2ddpx، مع صورة بحجم 1024 × 1024 بكسل. ويعود السبب في ذلك إلى أنّ "بكسل" CSS يأخذ في الاعتبار نسبة وحدات البكسل للجهاز (512 بكسل * 2 = 1024 بكسل).

ماذا عن <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 الأساسي يشير إلى دليل خاص بالكثافة.