أحد المفاهيم الأساسية في أي تصميم سريع الاستجابة هو تغيير حجم إطار العرض. ويرجع ذلك إلى أن وجهات النظر على الجوّال تختلف كثيرًا عن مناطق عرض سطح المكتب. للتحكم في حجم إطار العرض ، نستخدم عادة العلامة الوصفية لإطار العرض.
ومع ذلك ، فإن العلامة الوصفية لإطار العرض ، مثل جميع أسوأ التطورات في المستعرض للأخيرة إلى الأبد ، ليست W3C صالحة. تم تقديمه في الأصل بواسطة Apple في Safari ومنذ ذلك الحين تم اعتماده بواسطة متصفحات أخرى. ينتج عن هذا تنفيذ غير متناسق.
لحسن الحظ ، فإن W3C تعكف على إنقاذنا مرة أخرى من خلال إدخال قاعدةviewport CSS.
باستخدام طريقة meta tag القديمة ، هذه هي الطريقة التي سنخبر المتصفح بها حجم إطار العرض الذي يجب أن يُرى على أنه:
وبصرف النظر عن كونه غير صالح ، فإن تعليمات إطار العرض ليست بيانات ، أو عرض تقديمي. لذا ، بالالتزام بمبادئ فصل البيانات والملفات التقديمية ، يجب أن يكون تعليمات إطار العرض في CSS وليس HTML.
يبدو حل W3C في CSS كما يلي:
@viewport {width: device-width;}أو بدلاً من ذلك ، يمكنك تعيين إطار العرض برقم ، مثل:
@viewport {width: 640px;}يمكنك استخدام قاعدةviewport بالتزامن مع استعلاماتmedia لفرض أي إطار عرض أكبر من 960 ليتقلص إلى 960 بكسل ، مثل:
@media screen and (min-width: 960px){@viewport {width: 960px;}}تسمح لنا قاعدةviewport أيضًا بالتكبير إلى صفحة بشكل افتراضي ، بل وتعيين الحد الأقصى للتكبير:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}من الممكن حظر التكبير تمامًا عن طريق تعيين خاصية تكبير / تصغير المستخدم إلى ثابت. ومع ذلك ، فإن التكبير ، خاصة على الهواتف الذكية ، أمر ضروري لإمكانية الوصول وأوصي باستخدام هذا الموقع.
تسمح لنا خاصية أخرى مفيدة جدًا بقفل صفحة الويب الخاصة بنا في وضع أفقي أو عمودي:
@viewport {orientation: landscape;}إليك الأخبار السيئة: لا يتم حاليًا دعم هذه القاعدة إلا من خلال Internet Explorer 10 و Opera ، وتتطلب بادئات المتصفح ms-and -o- على التوالي.
في حين أن هذا مخيب للآمال على أقل تقدير ، فإن حقيقة أن وظيفة viewport متوفرة بالفعل في معظم المتصفحات يجب أن تعني أن هذه قاعدة بسيطة لالتقاطها. نأمل أن نبدأ رؤيته قدم في الليل يبني قريبا جدا.
هل يهمك الامتثال للمعايير؟ هل يساعد W3C أو يعوق التقدم على الويب؟ اسمحوا لنا أن نعرف في التعليقات.