حجم الشاشة
وخلاصة الأبعاد التطويرية لسلسلة الأيفون التي نعرفها هي كما يلي:
△حجم التطوير لكل طراز iPhoneالتحويل إلى حجم البكسل المعروف:
△أبعاد متعددة الأبعاد لكل موديلخريطة التكبير هي في الواقع علاقة التكبير بين حجم البكسل وحجم التطوير، ولكن هذا مجرد مظهر خارجي. العامل المؤثر الأساسي في التكبير هو PPI (DPI). إن فهم العلاقة بين كثافة الشاشة والأحجام المختلفة سيساعدنا على فهم مفهوم التكبير بعمق: "تعرف على الأساسيات! دليل DPI المصمم خصيصًا للمصممين》
في هذه الترقية، ورث حجم شاشة iPhone8 ودقتها التقاليد الرائعة لجهاز iPhone6 والإصدارات الأحدث؛
ومع ذلك، فقد خضع iPhone X لتغييرات كبيرة من حيث حجم الشاشة، والدقة، وحتى الشكل، فلنأخذ iPhone 8 كمرجع لنرى كيف ينبغي لنا أن نفكر في تكييف iPhone X.
دعونا نلقي نظرة على التغييرات في حجم iPhone X:
2. التكيف مع iPhoneX --- منطقة آمنة (منطقة آمنة)آراء شركة Apple حول تخطيط تصميم iPhone X هي كما يلي:
يجب أن يكون المحتوى الأساسي في المنطقة الآمنة للتأكد من عدم حجبه بواسطة الزوايا الدائرية للجهاز (الزوايا)، ومبيت المستشعر (مبيت المستشعر، والانفجارات الكاملة) والمؤشر الرئيسي في الأسفل. بمعنى آخر، يجب أن يكون المحتوى الذي نصمم لعرضه ضمن المنطقة الآمنة قدر الإمكان؛
3. تكييف iPhoneX --- مخطط التكيف viewport-fit 3.1 تكييف PhoneX، يتم استخدام العلامة التعريفية الخاصة بـ viewport-fit كمخطط التكيف في iOS 11، القيمة الافتراضية لـ viewport-fit هي تلقائية.قيمة viewport-fit هي كما يلي:
| آلي | الافتراضي: يتم عرض محتوى الصفحة viewprot-fit:contain في المنطقة الآمنة |
| غطاء | viewport-fit:cover، محتوى الصفحة يملأ الشاشة |
إعداد العلامة الوصفية الملائمة لإطار العرض (عند التغطية)
< اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، المقياس الأولي = 1.0، الحد الأدنى للمقياس = 1.0، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = لا، ملاءمة منفذ العرض = الغلاف>
3.2 مقدمة إلى وظيفة css Constant() وsafe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom
كما هو موضح أعلاه، يتضمن WebKit في نظام التشغيل iOS 11 دالة CSS جديدة ثابتة () ومجموعة من أربعة ثوابت محددة مسبقًا: منطقة آمنة - إدراج - يسار، منطقة آمنة - إدراج - يمين، منطقة آمنة - إدراج - أعلى، وآمنة -منطقة أقحم أسفل. عند دمجها معًا، تسمح للأنماط بالإشارة إلى حجم المنطقة الآمنة لكل جانب.
3.1 عندما نقوم بتعيين viewport-fit:contain، وهو الوقت الافتراضي set-safe-area-inset-left، وsafe-area-inset-right، وsafe-area-inset-top، وsafe-area-inset-bottom، وما إلى ذلك؛ المعلمات ليس لها أي تأثير.
3.2 عندما نقوم بضبط viewport-fit:cover: الإعدادات هي كما يلي
body { padding-top: Constant(safe-area-inset-top); // ارتفاع شريط التنقل + شريط الحالة هو 88 بكسل padding-left: Constant(safe-area-inset-left); ليست عمودية 0 الحشو الأيمن: ثابت (safe-area-inset-right)؛ // إذا لم تكن الشاشة عمودية، فهي 0 حشوة أسفل: ثابت (منطقة آمنة-داخل-أسفل)؛// ارتفاع القوس السفلي هو 34 بكسل } 4. التكيف مع iPhoneX --- إحصائيات الارتفاعإطار العرض المناسب: الغلاف + شريط التنقل
5. التكيف مع iPhoneX --- استعلام الوسائطلاحظ أنه تم استخدام 690 بكسل (ارتفاع المنطقة الآمنة) هنا، وليس 812 بكسل؛
@شاشة الوسائط فقط (العرض: 375 بكسل) و (الارتفاع: 690 بكسل) {body {الخلفية: أزرق }} 6.iPhoneX مناسب لمنفذ العرض ملخص المشكلة1. عندما تستخدم صفحة iphoneX ألوانًا متدرجة إذا كان viewport-fit:cover;
1.1 يتم تعيين الفرق بين لون واحد ولون متدرج عند تعيين لون الخلفية. إذا كان لونًا واحدًا، فسوف يملأ الشاشة بأكملها. إذا تم تعيين لون متدرج، فسيتم عرضه فقط في الارتفاع العنصر الفرعي، وارتفاع الصفحة هو 690 بكسل فقط. استخدم الحشوة العلوية: 88 بكسل؛
يتم تثبيت الجسم على:
<body><div class=content>هذا هو العنصر الفرعي</div></body>
1. عندما تكون أحادية اللون:
* { الحشو: 0؛ الهامش: 0 } الجسم { الخلفية: اللون الأخضر؛ );*/ /*حشو اليمين: ثابت(منطقة آمنة-داخل-يمين);*/ /*حشو-أسفل: ثابت(منطقة آمنة-إدراج-أسفل);*/ }2. التدرج اللوني
* { الحشو: 0؛ الهامش: 0 } الجسم { الخلفية: -webkit-gradient(linear, 0 0, 0 Bottom, from(#ffd54f), to(#ffaa22)); -inset-top); //88px /*padding-left: Constant(safe-area-inset-left);*/ /*padding-right: ثابت(منطقة آمنة-داخل-يمين);*/ /*padding-bottom: ثابت(منطقة آمنة-داخل-أسفل);*/ }كيفية حل مشكلة استخدام التدرج اللوني لملء الشاشة بأكملها، إعدادات CSS هي كما يلي
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>تصميم مواقع الويب لجهاز iPhone X: احترام المناطق الآمنة</title> <style> * { الحشو: 0؛ الهامش: 0 } html, body { الارتفاع: 100% } الجسم { الحشو العلوي: ثابت (المنطقة الآمنة - الجزء العلوي:) ثابت(منطقة آمنة-إدراج-يمين): ثابت(منطقة آمنة-إدراج-يمين); التدرج(خطي، 0 0، 0 أسفل، من (#ffd54f)، إلى (#ffaa22))؛ </style></head><body><div class=content>هذا هو العنصر الفرعي</div></body></html>2. يستخدم عنصر الصفحة التكيف مع تحديد الموضع الثابت: {position:fixed;}
2.1 عندما تكون صفحة العنصر الفرعي ثابتة في الأسفل، عند استخدام viewport-fit:contain؛ يمكنك أن ترى أنه عند عرض Bottom:0، سيتم عرضه فقط في المنطقة الآمنة؛
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>تصميم المواقع للآيفون X: احترام المناطق الآمنة</title> <style> * { padding: 0 } /*html,body {*/ /*height: 100%;*/ /*}*/ body { الخلفية: رمادي /*padding-top: Constant(safe-area-inset-top);*/ /*padding-left: Constant(safe-area-inset-left; );*/ /*padding-right: ثابت(safe-area-inset-right);*/ /*padding-bottom: ثابت(safe-area-inset-bottom);*/ } .top { width: 100٪ الارتفاع: 44 بكسل؛ الخلفية: أرجواني؛ } .الجزء السفلي: ثابت؛ اليسار: 0؛ الارتفاع: 44 بكسل؛ head><body> <div class=top>هذا في الأعلى</div> <div class=bottom>هذا في الأسفل</div></body></html>2.1 عندما تكون صفحة العنصر الفرعي ثابتة في الأسفل، عند استخدام viewport-fit:cover؛ يمكنك أن ترى أن الجزء السفلي:0 سيتم عرضه فقط في المنطقة الآمنة؛
أضف HTML، النص {width:100%;heigth:100%}
الشكل 1:
* { الحشو: 0؛ الهامش: 0 } html,body { الارتفاع: 100% } الجسم { الخلفية: اللون الرمادي; منطقة-إدراج-يمين: ثابت(منطقة آمنة-إدراج-يمين); العرض: 100% الارتفاع: 44 بكسل؛ الخلفية: أرجواني. } .الجزء السفلي: ثابت؛ اليسار: 0؛ الارتفاع: 44 بكسل؛الشكل 2:
* { الحشو: 0؛ الهامش: 0 } html,body { الارتفاع: 100% } الجسم { الخلفية: اللون الرمادي; Area-inset-left); .top { العرض: 100%؛ الارتفاع: 44 بكسل؛ الخلفية: أسود؛2.3 حل لطبقة القناع المنبثق لـAlertView
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, الأولي-مقياس=1.0, الحد الأدنى-مقياس=1.0 ، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = لا>--> <اسم التعريف = منفذ العرض المحتوى = العرض = عرض الجهاز، المقياس الأولي = 1.0، الحد الأدنى للمقياس = 1.0، الحد الأقصى للمقياس = 1.0، قابل للتحجيم بواسطة المستخدم = لا، منفذ العرض مناسب = الغلاف> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; </script> <style> * { هامش: 0 } html,body { width: 100% الارتفاع: 100% } body { حجم الخط: 0.32rem؛ Constant(safe-area-inset-top); -inset-bottom)؛ } .content { محاذاة النص: المركز } .testBut { الهامش: 50 بكسل العرض: 100 بكسل؛ 1 بكسل رمادي غامق؛ المخطط التفصيلي: لا شيء؛ تحديد المستخدم: لا شيء؛ لون الخلفية: أصفر؛ class=content> <button class=testBut onclick=showLoading()>تحميل النوافذ المنبثقة</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: تذكير دافئ، // محتوى العنوان: عضوية VIP على وشك الانتهاء، // احصل على جديد isKnow: false }); var xx = new UIAlertView(); console.log(xx); تلخيصما ورد أعلاه هو ما يقدمه لك المحرر حول تكييف صفحات HTML5 مع iPhoneX، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!