مناقشة على حجم مواقع الويب في موقع HTML5 بناء شاشة تعمل باللمس

هذه المقالة مقسمة إلى جزأين. يناقش الجزء الأول جدوى مواقع الويب عبر المنصات ، ويناقش الجزء الثاني كيفية إعداد منفذ العرض.

صحيح أن عرض التسمية والارتفاع يمكن أن يكونا قابلين للتكيف ، يمكننا القيام بذلك في وقت مبكر للغاية. ولكن ستجد أن العديد من مواقع الكمبيوتر التقليدية لا تزال تعمل على إصلاح العرض. (يستخدم Taobao عرض 1000 بكسل ، Sohu 950px ...) لماذا لا نسمح للموقع بالتكيف مع العرض والارتفاع؟ ذلك لأنه إذا سمحنا لعرض الملصقات بتمديده بشكل تعسفي من قبل المتصفح ، فسيؤدي ذلك إلى تجربة سيئة للغاية: فلن ترغب في أن يتحول شريطك الأيسر إلى المعكرونة عندما يتم تحجيم المتصفح إلى 100 بكسل ؛ ولن ترغب في أن يبدو موقع الويب الخاص بك وكأنه نتبووك لطالب المدرسة الابتدائية عندما يتم إقرار المتصفح. لذلك ، من غير الواقعي الاعتماد على تكيف الملصقات لتحقيق المنصات المتقاطعة ويكون على حساب تجربة المستخدم. في كثير من الأحيان يتعين علينا إصلاح العرض والارتفاع.

نعتمد على جهاز HTML5 للتحقق مما إذا كان الجهاز الحالي هو هاتف محمول أو جهاز لوحي ، وتحميل CSS المقابل وفقًا لذلك. على سبيل المثال: إذا اكتشفت أن جهازك هو جهاز لوحي ، فيمكنني عرض ثلاثة أعمدة أفقيًا ، وإذا كان هاتفًا محمولًا ، فسأعرض عمودًا واحدًا فقط. هذا لا يبدو صعبًا ، لكنه معقد للغاية للتنفيذ. لا نحتاج فقط إلى تطوير مجموعات متعددة من القوالب للأجهزة المختلفة ، ولكن أيضًا معالجة حجم الصورة. في هذا الصدد ، يمكننا أن نرى كيف يستخدم Boston Globe HTML5 لتنفيذ التصميم المستجيب.

بشكل عام ، يعد تحقيق مواقع الويب عبر المنصات باهظة الثمن ومقيدة لمعظم مواقع الويب. سواء كان ذلك ممكنًا يعتمد على الوضع الفعلي للموقع.

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

بكسلات CSS: الوحدات المجردة التي تستخدمها المتصفحات ، تستخدم بشكل رئيسي لرسم المحتوى على صفحات الويب.

بكسلات الجهاز: يعرض الحد الأدنى من الوحدة الفعلية على الشاشة ، يحتوي كل موانئ دبي على لونه وسطوعه.

لا يتم إصلاح مقدار البكسلات CSS ذات القيم المكافئة على شاشة الهاتف ، وهذا يعتمد على العديد من السمات. بعد التحليل والملخص ، يمكننا التوصل إلى صيغة: 1 CSS Pixels = (DevicePixelRatio)^2 Pixels (^2 تعني مربع. أما بالنسبة إلى ماهية DevicePixelRatio ، سيتم شرحه لاحقًا).

يمثل مؤشر أسعار المنتجين ، الذي يطلق عليه أحيانًا DPI ، عدد وحدات البكسل لكل بوصة. كلما ارتفعت القيمة ، كلما زادت العرض ، يمكن عرض الصور. (ملاحظة: تشير وحدات البكسل هنا إلى وحدات البكسل.) بعد معرفة ما يعنيه مؤشر أسعار المنتجين ، يمكننا بسهولة فهم طريقة حساب PPI. نحتاج أولاً إلى حساب وحدات البكسل المكافئة المائلة لشاشة الهاتف المحمول ، ثم وضعها قطريًا (حجم شاشة الهاتف المحمول هو طول الخط المائل لشاشة الهاتف المحمول) ، ويمكننا الحصول على مؤشر أسعار المنتجين. للحصول على إعلانات حساب دقيقة ، يمكنك الرجوع إلى الشكل أدناه. والأكثر إثارة للاهتمام هو أن مؤشر أسعار المنتجين في iPhone 4 المحسوب على أساس الصيغة هو 330 ، وهو أعلى قليلاً من 326 التي أعلنتها شركة Apple رسميًا.

وبالمثل ، يتم حساب أخذ HTC G7 كمثال ، يتم حساب دقة 480*800 و 3.7 بوصة لتكون مؤشر أسعار المنتجين 252.

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

من الشكل أعلاه ، يمكن ملاحظة أن الهواتف المحمولة التي تحتوي على PPI بين 120-160 تصنف على أنها الهواتف المحمولة منخفضة الكثافة ، يتم تصنيف 160-240 على أنها كثافة متوسطة ، يتم تصنيف 240-320 على أنها كثافة عالية ، ويتم تصنيف 320 على أنها كثافة عالية للغاية (أعطت Apple اسمًا UPSTREAM).

هذه الكثافة تتوافق مع قيمة التحجيم المحددة. خذ iPhone 4 أو 4S الذي نتعرف عليه أكثر ، ويبلغ مؤشر أسعار المنتجين الخاص بهم 326 ، وهو هاتف محمول ذو كثافة عالية. عندما نكتب صفحة بعرض 320 بكسل ونضعها على iPhone لعرضها ، ستجد أنه في الواقع عرض كامل. وذلك لأن الصفحة تم توسيعها مرتين بشكل افتراضي ، أي 640 بكسل ، في حين أن عرض iPhone 4 أو 4S هو بالضبط 640 بكسل.

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

يحتوي Viewport على ما مجموعه 5 سمات ، على النحو التالي:

<meta name = "Viewport"

المحتوى = "

الارتفاع = [pixel_value | ارتفاع الجهاز] ،

العرض = [pixel_value | عرض الجهاز] ،

المجلس الأولي = float_value ، الحد الأدنى على نطاق = float_value ، الحد الأقصى scale = float_value ، الحد الأقصى = float_value ،

قابل للعلاج المستخدم = [نعم | لا] ،

الهدف- الكثافة = [dpi_value | جهاز DPI | عالية الدقة | متوسطة DPI | Low-DPI] " />

من بين هذه الخصائص ، نركز على الكثافة الهدف ، والتي يمكن أن تغير التحجيم الافتراضي للجهاز. متوسطة DPI هي القيمة الافتراضية للكثافة الهدف. إذا حددنا الكثافة الهدف = Device-DPI ، فسيقوم الجهاز بتقديم الصفحة وفقًا لـ DPI الحقيقي. على سبيل المثال ، إذا تم وضع صورة 320*480 في iPhone 4 ، فستشغل الشاشة افتراضيًا ، ولكن إذا تم تعريف الكثافة الهدف = DVICE-DPI ، فإن الصورة تفسر فقط ربع الشاشة (نصف المربع) لأن دقة iPhone 4 هي 640*960.

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

في هذا الحل ، نستخدم الكثافة الهدف = Device-DPI ، بحيث يتم عرض جهاز الهاتف المحمول وفقًا للعدد الحقيقي من وحدات البكسل. من الناحية المهنية ، هو 1 بكسل CSS = 1 بكسلات الجهاز. على سبيل المثال ، بالنسبة إلى iPhone مع 640*960 ، يمكننا إنشاء صفحة مع 640*960 ، ولن تكون هناك أشرطة تمرير عند عرضها على iPhone. بالطبع ، بالنسبة للأجهزة الأخرى ، يلزم أيضًا صفحات بأحجام مختلفة ، لذلك غالبًا ما يتم استخدام هذا الحل لاستخدام استعلامات الوسائط لصنع صفحات مستجيبة. يمكن تقديم هذا الحل بشكل مثالي بدقة محددة ، ولكن مع وجود المزيد من القرارات المختلفة لتكون متوافقة ، كلما زادت التكلفة ، حيث أن الرموز المنفصلة مطلوبة لكل دقة. هنا مثال بسيط:

<meta name = "viewport" content = "target- densedpi = device-DPI ، width = width device" />

#Header {

الخلفية: url (صورة متوسطة الكثافة. png) ؛

}

شاشة MEDIA و (-webkit -device-pixel-ratio: 1.5) {

/ * CSS للشاشات عالية الكثافة */

#Header {background: url (Highdense-Image.png) ؛}

}

شاشة MEDIA و (-webkit -device-pixel-ratio: 0.75) {

/ * CSS للشاشات منخفضة الكثافة */

#Header {background: url (lowdense-dimage.png) ؛}

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