تعليق: سيقدم لك محرر هذه المقالة كيفية استخدام HTML5 لتحقيق دعم مواقع الويب في Windows 8. إذا كنت في حاجة إليها ، فيرجى الرجوع إليها
أولاً ، دعنا نتعرف على دعم Windows 8. يمكن لتطبيقات المترو في Windows 8 تقسيم الشاشة جيدًا. الرقم التالي
هذا يتيح للمستخدمين التبديل بسهولة شديدة أثناء الاستخدام. يحتوي النظام أيضًا على لوائح صلبة على التعلق. في أكثر من شاشتين ، واحدة كبيرة والآخر صغير. ويتم إصلاح عرض الشاشة الصغيرة في 320 بكسل.
لذلك عندما ينشر المستخدمون موقع الويب إلى شاشة صغيرة ، يتم تقليل الصفحة بشكل افتراضي. كما هو مبين في الشكل أدناه:
فكيف يمكننا حل هذه المشكلة بشكل جيد للغاية؟ ماذا عن جعل الموقع يظهر تأثيرًا ودود للغاية تحت الشاشة الصغيرة لنظام التشغيل Windows 8؟ أدناه لدي مثال بسيط
كما هو موضح في الصورة ، صفحة بسيطة وتقليدية للغاية ، بما في ذلك التنقل المرتبة أفقيًا ، والمحتوى ، إلخ.
وينطبق الشيء نفسه بالنسبة للرمز التقليدي
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
.NAV {
Padding: 5px 0px 5px 0px ؛
الهامش: 0px ؛
العرض: 100 ٪ ؛
نوع القائمة: لا شيء ؛
خلفية اللون: #CDDCD6 ؛
الارتفاع: 28 بكسل ؛
}
.nav li {
الهامش: 0px 1px 0px 0px ؛
تعويم: اليسار.
خلفية اللون: #0094ff ؛
Padding: 5px 10px 5px 10px ؛
}
.dvitem {
العرض: 100 ٪ ؛
الارتفاع: 400 بكسل ؛
خلفية اللون: #B6FF00 ؛
واضح: كلاهما ؛
}
.رئيسي {
العرض: 960 بكسل ؛
الهامش: 0px Auto 0px Auto ؛
}
</style>
</head>
<body>
<viv>
<ul>
<li> الصفحة الرئيسية </li>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>
<viv>
</div>
</div>
</body>
</html>
يتم تقليل مثل هذه الصفحة في التأثير العصي كما هو موضح في الشكل:
كيفية تعديله؟ في الصفحات التقليدية مثل هذا ، نحتاج فقط إلى كتابة CSS بناءً على خصائص الترحيل لنظام التشغيل Windows 8. دع صفحتنا يتم عرضها وعرضها على عرض 320 بكسل.
رمز التنفيذ كما يلي: أضف رمز النمط التالي إلى الصفحة الأصلية
شاشة MEDIA و (الحد الأقصى لـ WIDTH: 320 بكسل) {
@-ms-viewport {width: 320px ؛ }
.NAV {
Padding: 5px 0px 5px 0px ؛
الهامش: 0px ؛
العرض: 100 ٪ ؛ خلفية اللون: #fff ؛
}
.nav li {
العرض: 300 بكسل ؛
واضح: كلاهما ؛
الهامش: 0px 0px 1px 0px ؛
خلفية اللون: #0094ff ؛
Padding: 5px 0px 5px 0px ؛
}
.dvitem {
العرض: 95 ٪ ؛
الارتفاع: 600 بكسل ؛
لون الخلفية: #ff00a4 ؛
واضح: كلاهما ؛
}
.رئيسي {
العرض: 320 بكسل ؛
الهامش: 0px Auto 0px Auto ؛
}
}
لا يوجد فرق بين التصفح على الشاشة كاملة والتصفح التقليدي.
الفرق هو أن تأثير العرض واضح عند التمسك بشاشة صغيرة كما هو موضح في الشكل التالي.
نموذج رمز تنزيل/ملفات/مخاطر/index.rar