استخدم الوسائط لتحديد المشكلة التي واجهتها في عرض الشاشة:
على iOS ، يمكنني القيام بذلك عندما أقوم بتدوير الشاشة ، لكنها لم تستجب على Android. لا تزال الشاشة الأفقية تعرض نمط الشاشة العمودي.
بعد التحقق من المعلومات ، إذا كانت وسائط CSS3 تريد أن يكون لها تأثير عرض أفضل على جانب الهاتف المحمول ، فأنت بحاجة إلى إضافة هذا الرمز إلى رأس الصفحة.
<meta name = "viewport" content = "width = width device ، scale scale = 1.0 ، maximum-scale = 1.0 ، charcalable = no">
لكن لا يمكنني استخدام هذا الرمز. لأن صفحتي تم تكييفها. يمكن عرض حجم الخط وحجم النمط وفقًا لحجم الشاشة. إذا أضفت هذا الرمز ، فلن يعمل تكيفي. لذا استخدم طرقًا أخرى
حل:
يوفر الجهاز المحمول حدثًا: ArceantationChange حدث
تمت إضافة هذا الحدث بواسطة Apple لـ Safari. بحيث يمكن للمطورين تحديد متى يقوم المستخدم بتبديل الجهاز من عرض المناظر الطبيعية إلى وضع عرض الصورة.
سيتم تشغيل هذا الحدث عندما يدور الجهاز.
.
طالما أن المستخدم يغير وضع عرض الجهاز ، سيتم تشغيل حدث تشارغ التوجيه. كائن الحدث في هذا الوقت لا يحتوي على أي معلومات قيمة.
لأنه يمكن الوصول إلى المعلومات الوحيدة ذات الصلة من خلال window.orialitation
سمة الاتجاه
لديها ثلاث قيم: 0،90 ، -90
0 هي صورة ، -90 يعني أن الجهاز يدور أفقياً إلى وضع المناظر الطبيعية على اليمين ، بينما يعني 90 أن الجهاز يدور أفقياً إلى وضع المناظر الطبيعية على اليسار.
هناك واحد آخر هو 180 ، وهو ما يعني الشاشة العمودية ولكنه وضع شاشة عمودي مقلوب. لكن هذا النموذج لم يتم دعمه بعد.
كما هو مبين في الشكل:
لذلك ، الجمع بين حدث ترجمة التوجيه هذا وخاصية الاتجاه للنافذة ، من الأسهل علينا تحديد ما إذا كان الجهاز في شاشة أفقية أو رأسية.
(function () {var init = function () {var updateorientation = function () {var iniventation = window.orientation ؛ switch (اتجاه) {الحالة 90: الحالة -90: الاتجاه = 'Landscape' ؛ المناظر الطبيعية ، والشاشة الرأسية //plusportdocument.body.parentnode.setAttribute('class' ، initient end updateorientation () ؛} ؛ window.adDeventListener ('domContentLoaded' ، init ، false) ؛}) () ؛لذلك ، يمكن إضافة الفصل وفقًا لحالات الدوران المختلفة ، بحيث يمكن كتابة CSS لدينا مثل هذا
)
طريقة أخرى للكتابة هي استخدام استفسارات الوسائط
media all و (الاتجاه: صورة) {body div {background: red ؛}} media all و (الاتجاه: المناظر الطبيعية) {body div {background: Blue ؛ }}يعمل استعلام وسائط التوجيه هذا على iOS3.2+ و Android 2.0+.
نسبيا ، هذا النوع من الكود هو أكثر إيجازا قليلا. مع JS+CSS أعلاه ، هذا النوع من الكود هو CSS نقي. عندما يدور الجهاز ، سيتم استدعاء CSS الذي يغير الاتجاه وفقًا لاتجاه الجهاز.
التوافق
لا توفر بعض الأجهزة حدثًا للتوجه ، ولكن لا تثير حدث تغيير حجم النافذة. وإذا لم تدعم استفسارات وسائل الإعلام ، فماذا يجب أن نفعل؟
يمكن الحكم عليه من خلال الحدث تغيير الحجم. استخدام العداء الداخلي و innerheight لاسترداد حجم الشاشة. إن الحكم على المقارنة بين العرض والارتفاع والعرض والارتفاع هي شاشات رأسية ، والعرض والارتفاع هي شاشات أفقية.
الرمز كما يلي:
(function () {var updateorientation = function () {var iniventation = (window.innerwidth> window.innerheight)؟ Window.AdDeventListener ('Resize' ، updateorientation ، false) ؛} ؛ window.adDeventListener ('domcontentloaded' ، init ، false) ؛}) () ؛وبهذه الطريقة ، يمكننا أن نرى تغييرات النمط التي جلبتها دوران الشاشة في المتصفح.
مزيج من طريقتي الكشف هو كما يلي:
(function () {var supportorientation = (typeof window.orientation === 'number' && typeof window.onorientationChange === 'Object') ؛ var init = function () {var htmlnode = document.body.parentnode ، reacteration ؛ var updateorientation = function () {if (doodorientation) -90: الاتجاه = 'Landscape' ؛ break ؛ الافتراضي: الاتجاه = 'portrait' ؛ break ؛}} {اتجاه = (window.innerwidth> window.innerheight)؟ 'portrait' ؛} htmlnode.setattribute ('class' ، الاتجاه) ؛} ؛ if (supportorientation) {window.adDeventListerener ('TirectionChange' ، updateorientation ، false) ؛} آخر {// الاستماع إلى الحدث تغيير الحجم Window.AdDeventListener ('Resize' ، updateorientation ، false) ؛} updateorientation () ؛} ؛ window.adDeventListener ('domcontentloaded' ، init ، false) ؛}) () ؛باستخدام هذه الطريقة ، يمكنك حل الكشف عن الشاشة الأفقية والرأسية المزعجة للأجهزة المحمولة.