إعادة تعيين حجم / العرض / التكبير من سفاري على اي فون باستخدام جافا سكريبت / onorientationchange

Question

وأنا عرض محتوى مختلف اعتمادا على كيفية المستخدم تحتجز له / لها الهاتف باستخدام استدعاء onorientationchange في علامة الجسم. هذا يعمل كبيرة - اختبئ شعبة واحدة في حين جعل البعض مرئية.

ووشعبة في وضع عمودي تبدو كبيرة على الحمل الأول. أنا استخدم هذا للحصول على الحجم الصحيح / التكبير:

و<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

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

ولقد حاول العديد من الأشياء المختلفة في محاولة للحصول على حجم / التكبير / عرض من حق الشاشة، ولكن لم الحظ. هل هناك أي طريقة للقيام بذلك؟

ويرجع الفضل في ذلك مسبقا!

Answer 1

وهنا هو ما يمكنني استخدام للتعامل مع التكبير على بلدي وسائل الإعلام الاستفسارات:

و<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">

والحد الأقصى للنطاق هو الشيء الذي يباع بالنسبة لي. وهذا يعني الانتقال من عمودي إلى أفقي على اي فون على نحو سلس حقا مع أية مشاكل التكبير في كل ...

Answer 2

وهذا "الجواب" قبلت أعلاه ليست حقا جوابا، في هذا تنكر أي التكبير على الإطلاق هو سيئة كما يسأل المستخدم IE للتبديل إلى متصفح آخر. إنه لأمر فظيع للمعاقين. تريد تصميم للا تفعل أشياء التكبير جبان التي تعتبر مثالية أبل على تحويل اتجاه الرأي، ولكن كنت تاركا للمستخدمين المعاقين في الغبار. إلى حد كبير غير مستحسن.

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

Answer 3

وكان لي بعض المشاكل مع مستويات التكبير تغيير من أفقي إلى عمودي، عندما كان محتوى أكبر من العرض. تحديد "الحد الأدنى للنطاق = 1.0"، حل هذا بالنسبة لي.

Answer 4

وهذا العمل متعود إذا كنت تقوم بتشغيل التطبيق على شبكة الإنترنت في رحلات السفاري، ولكن أعتقد أنه سوف يعمل إذا كنت تستخدم UIWebView داخل التطبيق الخاص بك.

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

Answer 5

وكان لي هذه المسألة جدا على ما أعتقد. محاولة وضع "الحد الأقصى على نطاق و= 1.0" (وربما "على نطاق minumum-= 1.0" إذا كنت أشعر بأن ذلك) في علامة إطار العرض الخاص بك. هذا يفترض كنت لا تريد للمستخدم أن يكون على نطاق وقادرة على الرغم من (وأنا لا)

Answer 6

<ع> استخدام العلامات الفوقية لهذا لا يعمل. لقد حاولت كل مجموعة من العلامات الفوقية وorientationchange وgesturechange الأحداث المحتملة، حاولت مهلة وجميع أنواع جافا سكريبت يتوهم، ثم وجدت هذا: https://github.com/scottjehl/iOS-Orientationchange-Fix

وعبر عن هذا السؤال ذات الصلة: <لأ href = "https://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an -orientation تغيير على رأس iphon "> كيف أقوم بإعادة ضبط مقياس / التكبير من التطبيق على شبكة الإنترنت على تغيير التوجه على اي فون؟

في هذا المنصب، شارك أندرو Ashbacher وصلة إلى رمز كتبه سكوت Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

وهذا هو الحل ملفوفة بشكل جيد في IIFE لذلك لم يكن لديك ما يدعو للقلق حول قضايا اسم الفضاء.

ومجرد قطرة في لالسيناريو الخاص بك (ليس في document.ready() إذا كنت تستخدم مسج) وفيولا!

وكل ما يفعله هو تعطيل التكبير على الأحداث devicemotion التي تشير إلى أن orientationchange بات وشيكا. إنها أفضل حل رأيت لأنه يعمل فعلا ولا تعطيل التكبير.

وتحرير: هذا النهج ليس دائما يمكن الاعتماد عليها، وخصوصا عندما كنت عقد باد في زاوية. أيضا، أنا لا أعتقد أن هذا الحدث هو متاح لجنرال 1 لاب توب

Answer 7

ويمكنك تعيين الخاصية user-scalable في سمة المحتوى. جرب هذا:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">

هذه الإجابة :

<اقتباس فقرة>   

ولكن إذا قمت بتعيين-تحجيم المستخدم = بأي حال من الأحوال موقعها على شبكة الانترنت لا تسمح للتكبير أو التصغير.