منذ وقت ليس ببعيد ، قمت بمشروع H5 وكنت بحاجة إلى القيام ببعض المعالجة عندما تتغير الشاشة الأفقية والرأسية. ليس هناك شك في أنه يجب استخدام ترجمة التوجيه لمراقبة التغييرات في الشاشات الأفقية والرأسية.
الخطة 1:
// استمع إلى التوجيه changewindow.addeventListener ("TirpeationChange" ، الوظيفة (الحدث) {// الحكم على الشاشات الأفقية والعمودية على أساس event.orientation | screen.orientation.angle تساوي 0 | 180 ، 90 | -90 درجة} ، خطأ) ؛بعد إضافة الكود ، هناك العديد من مشكلات التوافق. تحدث مشكلات التوافق هنا في مكانين:
ترجمة
event.oriteration | screen.orientation.angle
ما يلي هو توافق حدث ArceantationChange:
فيما يلي توافق الشاشة. التوجه:
الخطة 2:الخطة أعلاه لا تعمل ، لذلك يمكنك فقط القيام بطرق أخرى. Google وتعلم أنه يمكن تحقيق ذلك من خلال تغيير الحجم (Window.inner/Outerwidth ، Window.inner/Outerheight):
window.addeventListener ("تغيير الحجم" ، الدالة (الحدث) {var extrientation = (window.innerwidth> window.innerheight)؟يلبي هذا الحل أساسًا احتياجات معظم المشاريع ، ولكن لا تزال هناك بعض أوجه القصور:
طالما أن حجم النافذة يتغير ، سيتم تشغيل حدث تغيير الحجم بشكل مستمر. يمكنك استخدام setTimeOut لتحسين
إذا كانت هناك أماكن متعددة تحتاج إلى مراقبة الشاشات الأفقية والرأسية ، فأنت بحاجة إلى تسجيل Windows.adDeventListener متعددة ("تغيير الحجم" ، الدالة (الحدث) {...}). هل يمكنك تحسينه من خلال أوضاع الاشتراك والنشر؟ فقط تسجيل تغيير حجمه لمراقبة التغييرات في الشاشات الأفقية والرأسية ، ونشر الإخطارات إلى الكائن المشترك طالما تحدث التغييرات الأفقية والرأسية. الأماكن الأخرى التي تحتاج إلى مراقبة الشاشات الأفقية والرأسية هي مجرد اشتراك.
رمز المفتاح كما يلي:
var resizecb = function () {if (win.innerwidth> win.innerheight) {// تهيئة الحكم meta.init = 'landscape' ؛ meta.current = 'landscape' ؛ } آخر {meta.init = 'portrait' ؛ meta.current = 'portrait' ؛ } return function () {if (win.innerwidth> win.innerheight) {if (meta.current! == 'Landscape') {meta.current = 'landscape' ؛ event.trigger ('__ توجيهات __' ، meta) ؛ }} آخر {if (meta.current! == 'portrait') {meta.current = 'portrait' ؛ event.trigger ('__ توجيهات __' ، meta) ؛ }}}}}}} () ؛تم النقر على الرمز الكامل هنا
الخطة 3:
ومع ذلك ، أعتقد شخصياً أن تنفيذ window.innerwidth> window.innerheight هو نوع من اكتشاف الزائفة ، وهو أمر غير موثوق به بعض الشيء. هل يمكن تحقيق الكشف من خلال متصفح؟ يعتمد هذا على استعلام Media CSS3@Media.
كما يلي توافق Media:
كما هو موضح في الشكل أعلاه ، تدعم متصفحات الهاتف المحمول الوسائط CSS3.
أفكار التنفيذ:
قم بإنشاء نمط CSS محدد يحدد حالة الشاشة الأفقية والرأسية
حقن رمز CSS في صفحات عبر JS
تحصل وظيفة رد الاتصال على حالة الشاشة الأفقية والرأسية
أنا هنا حدد عائلة Font-Font Fongily <html> </html> كسممة نمط الكشف. الأسباب كما يلي:
حدد <html> </html> بشكل أساسي لتجنب الانتعاش والإعادة
يرجع نمط عائلة الخط بشكل أساسي إلى أن عائلة الخط لها الخصائص التالية:
وبهذه الطريقة ، يمكننا تحديد شعار محدد لتحديد حالة الشاشة الأفقية والرأسية ، ولكن يجب وضع الشعار المحدد أمام الخطوط الأخرى ، بحيث لن يحدث تغييرات خط HMTL.
رمز المفتاح كما يلي:
// callback var resizecb = function () {var hstyle = win.getComputedStyle (html ، null) ، ffstr = hstyle ['font-family'] ، pstr = "portrait ،" + ffstr ، lstr = "landscape ،" + ffstr ، // splicing css cssster = eirentation (inition) .orientation {font-family: ' + pstr +' ؛}} media (الاتجاه: المناظر الطبيعية) {.orientation {font-family: ' + lstr +' ؛}} '؛ // تحميل نمط loadstylestring (CSSSTR) ؛ // إضافة فئة html.classname = 'الاتجاه' + html.classname ؛ if (hstyle ['font-family'] === pstr) {// تهيئة الحكم meta.init = 'portrait' ؛ meta.current = 'portrait' ؛ } آخر {meta.init = 'landscape' ؛ meta.current = 'landscape' ؛ } return function () {if (hstyle ['font-family'] ==== pstr) {if (meta.current! == 'portrait') {meta.current = 'portrait' ؛ event.trigger ('__ توجيهات __' ، meta) ؛ }} آخر {if (meta.current! == 'Landscape') {meta.current = 'landscape' ؛ event.trigger ('__ توجيهات __' ، meta) ؛ }}}}}} () ؛تم النقر على الرمز الكامل هنا
نتائج الاختبار
تأثير الصورة:
تأثير المناظر الطبيعية:
الخطة 4:
يمكنك تحسينه. عند دعم ChanceationChange ، استخدم ChaintationChange الأصلي. إذا لم يكن كذلك ، استخدم الحل 3.
رمز المفتاح كما يلي:
// ما إذا كان حدث eachtationChange مدعومًا = ("الاتجاه" في النافذة && 'OnorientationChange "في النافذة) ؛ // callbackvar tirectioncb = function (e) {if (win.orientation === 180 || win.orientation === 0) {meta.init =' portrait ؛ meta.current = 'portrait' ؛ } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'landscape' ؛ meta.current = 'landscape' ؛ } return function () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'portrait' ؛ } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'landscape' ؛ } event.trigger (eventType ، meta) ؛ }} ؛ var callback = isorientation؟ TirectionCb (): (function () {resizecb () ؛ return function () {timer && win.cleartimeout (timer) ؛ timer = win.settimeout (resizecb ، 300) ؛}}) ()تم النقر على الرمز الكامل هنا
الخطة 5:
في الوقت الحاضر ، يتم تنفيذ جميع الحلول المذكورة أعلاه من خلال أوضاع الأحداث المخصصة للاشتراك والنشر. هنا ، يمكن محاكاة تشكيل التوجيه بناءً على آلية حدث المتصفح. وهذا هو ، إصلاح عدم توافق تشانج التوجيه.
رمز المفتاح كما يلي:
var eventType = 'TirectionChange' ؛ // Trigger TirectionChangevar Fire = function () {var e ؛ if (document.createevent) {e = document.createEvent ('htmlevents') ؛ E.Initevent (EventType ، true ، false) ؛ win.dispatchevent (e) ؛ } آخر {e = document.createEventObject () ؛ E.EventType = EventType ؛ if (win [eventType]) {win [eventType] () ؛ } آخر إذا (win ['on' + eventType]) {win ['on' + eventType] () ؛ } آخر {win.fireevent (eventType ، e) ؛ }}}تم النقر على الرمز الكامل هنا
من خلال الحلول الخمسة المذكورة أعلاه ، لدي فهم إضافي للكشف عن الشاشة الأفقية والرأسية على محطات الأجهزة المحمولة. أنا أعرف فقط لماذا أكتب عن بعض الأشياء بنفسي بعد أن خبرتها بنفسي. لقد سجلت أيضًا الأسباب في المقال ، على أمل أن يكونوا مفيدين للجميع. بعد خمسة حلول تطورت إلى Final Tirectionchange-Fix ، عنوان Github: https://github.com/zhansingsong/orientationchange-fix
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.