كيف تحكم
توفر الأجهزة المحمولة كائنين ، سمة واحدة ، وحدث واحد:
(1) Window.oriteration ينتمي إلى السمة السابقة لكائن النافذة ؛ هناك ثلاث قيم: 0 هي صورة ، 90 مقلوب إلى اليسار ويتحول إلى وضع المناظر الطبيعية ، -90 مقلوب إلى اليمين ويتحول إلى وضع المناظر الطبيعية ، والآخر 180 هو ما إذا كان الجهاز مقلوب إلى أسفل أو عمودي.
(2) ActionationChange هو حدث سيؤدي إلى هذا الحدث عندما يدور الجهاز ، تمامًا مثل الحدث تغيير الحجم المستخدم على الكمبيوتر.
عند استخدام هذين الاثنين معًا ، يكون من السهل الحصول على حالة الشاشة الأفقية والعمودية للجهاز. الرمز كما يلي:
(function () {var init = function () {var updateorientation = function () {var tirection = window.orientation ؛ switch (اتجاه) {الحالة 90: الحالة -90: الاتجاه = 'landscape' ؛ break ؛ default: eachtation = 'portrait' ؛ break ؛ Document.ParentNode.Settribute ("الاتجاه" ؛في CSS يمكنك الكتابة بهذه الطريقة:
/** Performance Div Border يظهر الأزرق **/. جسم صورة div {الحدود: 1 بكسل Solid Blue ؛}/** الأداء الحدود Div يظهر أصفر **/.بالطبع ، يمكنك أيضًا استخدام استفسارات الوسائط (الموصى بها):
media all و (الاتجاه: صورة) {body div {border: 1px solid Blue ؛ }}@media all و (الاتجاه: المناظر الطبيعية) {body div {border: 1px solid أصفر ؛ }}التوافق
كيف تتعامل مع الموقف الذي لا يوجد فيه النافذة. التوجيه أو ترجمة التوجيه في الجهاز؟ (عمومًا لا يوجد أحد ، والآخر غير موجود ، وإلا)
في التطوير المبكر ، غالبًا ما يتم استخدام وضع نموذج جهاز Chrome ، ولكن هذه الخاصية غير موجودة ، فكيف يمكنني الحصول على هذه القيمة؟ الطريقة البسيطة هي الحكم بناءً على مقارنة العرض والارتفاع. إذا كان العرض أصغر من الارتفاع ، فهو شاشة رأسية ، والعرض والارتفاع شاشة أفقية.
أنا أعرف كيفية الحصول على النتيجة. والشيء التالي هو كيفية الاستماع إلى أحداث انعكاس الجهاز. نظرًا لأن ChiefChange غير متوفر ، استخدم حدث تغيير حجمه الأساسي أو استخدام المؤقت للكشف عنه. يرجى إلقاء نظرة على الرمز:
(function () {var updateorientitation = function () {var iniventation = (window.innerwidth> window.innerheight)؟ تغيير الحدث.أخيرًا ، يكون الجمع بين الطريقتين أعلاه هو حل الكشف الكامل
(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: window.addeventListener (eachtationchange ، updateorientation) ؛لخص
استخدم حدث ChiefChange لمراقبة ما إذا كان الجهاز يدور ، واستخدم خاصية Window.oriteration لتحديد ما إذا كانت شاشة أفقية أو عمودية حاليًا ، وذلك لأداء عمليات مختلفة.