كيفية فرض الشاشة العمودية على صفحة الجوال

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

الأول هو تحديد حالة الشاشة الأفقية باستخدام الكود التالي:

 function orient() { if(window.orientation == 90 || window.orientation == -90) {//شاشة أفقية//ipad، شاشة عمودية لآيفون Andriod//$(body).attr(class, //orientation = 'landscape'; //alert(شاشة عمودية لجهاز iPad، وشاشة Andriod أفقية)؛ $(p).text(horizontal screen); == 0 ||.window.orientation == 180) {//شاشة عمودية//شاشة iPad، شاشة أفقية لجهاز iPhone؛// $(body).attr(class, Portrait);// التوجه = 'portrait'; //alert(ipad، شاشة iphone الأفقية؛ شاشة Andriod العمودية)؛ $(p).text(vertical screen); }); // يتم الاتصال به عندما يقوم المستخدم بتغيير اتجاه الشاشة $(window).on('orientationchange', function(e) { orient(); });

هذا هو مراقبة اتجاه الهاتف المحمول. ومع ذلك، نظرًا لأن التطبيق مفتوح أفقيًا، فمن المستحيل عادةً اكتشاف ذلك، والشرط الأساسي لذلك هو أنه يجب تشغيل التدوير التلقائي للهاتف. لذلك تم التخلي عن الطريقة المذكورة أعلاه.

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

 // استخدم تدوير CSS3 لتدوير الحاوية الجذرية بمقدار 90 درجة عكس اتجاه عقارب الساعة لإجبار المستخدم على عرضها عموديًا var DetectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document.getElementsByTagName(body)[0], $wrapper = document.getElementById(vue), style = ; height) { // شاشة أفقية // style += width: + width + px;// انتبه إلى تبديل العرض والارتفاع بعد التدوير // style += height: + height + px;;/ style += -webkit- تحويل: تدوير (0)؛ تحويل: تدوير (0)؛؛// style += -webkit-transform-origin: 0 0;;// style += تحويل الأصل: 0 0;; حجم الخط: + (العرض * 100 / 1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = حجم الخط: + (width * 100 / 1125) + px; = العرض: + الارتفاع + بكسل؛؛ النمط += الحد الأدنى للارتفاع: + العرض + بكسل؛؛ النمط += -webkit-transform: Rotate(-90deg); تحويل: Rotate(-90deg);; // انتبه إلى التعامل مع نمط نقطة المنتصف للتدوير += -webkit-transform-origin: + height / 2 + px + (height) / 2) + px؛؛ النمط += أصل التحويل: + الارتفاع / 2 + px + (الارتفاع / 2) + px؛؛ //style += حجم الخط: + الارتفاع * 100 / 1125 + px;; //$(html).css({font-size:(height * 100 / 1125),overflow-y:hidden}); style.cssText = حجم الخط: + الارتفاع * 100 / 1125 + بكسل + overflow-y:+hidden;+height:+height+px;; style += overflow-y: Hidden;; $wrapper.style.cssText = style; ;function add_tab(){ var clone_tab = $(footer).clone(); $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left) :تلقائي،الأعلى:0،العرض:11.25ريم،الارتفاع:1.77ريم})}

أعتقد أن هذا الرمز ليس صعبًا بالنسبة لموظفي الواجهة الأمامية، ولكن هناك ثلاث نقاط يجب ملاحظتها.

النقطة الأولى:

في البداية، قمت بتدوير HTML بالكامل مباشرةً من أجل الراحة. في هذا الوقت، ستكون هناك مشكلة، وهي أن تحديد موضع العناصر الثابتة في الصفحة لن يعمل (يتم وضع <footer> في الكود على أنه tab Switch. Bottom)؛ نحن بحاجة إلى تغيير هذا، نظرًا لأن تدوير العنصر الأصلي لن يعمل على العناصر الفرعية، فلن نحتاج إلى تدوير العنصر الأصلي، فقط قم بتدوير العناصر الشقيقة مباشرة. أقوم هنا بتدوير عنصر يسمى #vue، لأن جميع المحتويات الأخرى الموجودة على صفحتي موجودة في هذا القسم. لذلك قمت بتدوير العنصر. ثم يمكن استخدام تحديد الموضع في هذا الوقت، ولكن النمط خاطئ، لذلك في وظيفة add_tab الخاصة بي، أقوم بضبط حجم هذا العنصر ونمطه بحيث يمكن عرضه بشكل طبيعي على الجانب الأيمن من الشاشة، أي في الوضع العمودي الوضع، الجزء السفلي من الشاشة.

النقطة الثانية:

الشيء الثاني الذي يجب ملاحظته هو أنني سأغير حجم خط HTML لأنني أستخدم تخطيط rem، ولكن كن حذرًا في هذا الوقت عندما نقوم بتدويره، يصبح العرض ارتفاعًا ويصبح الارتفاع عرضًا تحتاج إلى استخدام الارتفاع لحساب حجم الخط للدليل الجذر.

النقطة الثالثة:

النقطة الثالثة مذكورة في البرنامج. نحن بحاجة إلى الانتباه إلى مركز التدوير. مركز التدوير الافتراضي هو النقطة المركزية للعنصر المحدد. الآن نريد تغيير النقطة المركزية للدوران. بعد التدوير، تحتاج أيضًا إلى تجاوز y:إخفاء HTML. وإلا سيكون هناك التمرير غير الضروري.

في هذه الحالة، يتم تدوير الصفحة بأكملها بشكل أساسي، ويتم تحديد موضع العناصر الثابتة الموجودة في الأسفل مرة أخرى بنجاح. لحسن الحظ، النافذة المنبثقة التي نستخدمها هي نافذة Layui المنبثقة، وبعد ذلك يمكننا تدوير النافذة المنبثقة بمقدار 90 درجة.

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

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.