كيفية تعيين تعريف إطار العرض لجهاز iPhone الذي يتعامل مع التدوير بشكل صحيح؟

Question

لذلك كنت أستخدم:

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

لعرض محتوى HTML الخاص بي بشكل جيد على iPhone.يعمل بشكل رائع حتى المستخدم يقوم بتدوير الجهاز إلى الوضع الأفقي ، حيث تظل الشاشة مقيدة ب 320 بكسل.

هل هناك طريقة بسيطة لتحديد إطار العرض الذي يتغير استجابة للمستخدم الذي يغير ملف اتجاه الجهاز؟أم يجب أن ألجأ إلى جافا سكريبت للتعامل مع ذلك؟

Answer 1

وكان مجرد محاولة لعمل هذا من نفسي، وكان الحل خطرت لي:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

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

Answer 2

لأي شخص لا يزال مهتما:

http://wiki.phonegap.com/w/page / 16494815 / منع-التمرير على اساس فون فونغاب-تطبيقات

من الصفحة:

<meta name="viewport" content="user-scalable=no,width=device-width" />

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

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

Answer 3

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

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

Answer 4

لقد توصلت إلى نهج مختلف قليلاً يجب أن يعمل على الأنظمة الأساسية المشتركة

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

حتى الآن لقد اختبرت في

سامسون جالاكسي 2

• سامسونج جالاكسي اس
• سامسونج غالاكسي S2
• Samsung galaxy Note (ولكن كان عليه تغيير CSS إلى 800 بكسل [انظر أدناه]*)
• موتورولا

• اي فون 4

  • @media screen and (max-width:800px) {

هذه خطوة هائلة للأمام في مجال تطوير الأجهزة المحمولة...

Answer 5

أنت إعداد عليه أن لا يكون قادرا على مقياس (الحد الأقصى النطاق = الأولي على نطاق و)، لذلك لا يمكن رفع مستوى عند تدوير إلى الوضع الأفقي. تعيين الحد الأقصى النطاق = 1.6 وسيكون مقياس صحيح لتناسب وضع أفقي.

Answer 6

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

أولا، إضافة جافا سكريبت التالية إلى صفحة ويب التي يتم عرض:

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

وبعد ذلك في حياتك - (الفراغ) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) طريقة fromInterfaceOrientation، إضافة:

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

ويمكن أن يتم اللف إضافية عن طريق تعديل أكثر من إعدادات المحتوى viewportal:

<وأ href = "http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript -CSS و-ميتا-Tags.htm "يختلط =" نوفولو "> http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone-- لاب توب-منفذ العرض-التوجيه باستخدام جافا سكريبت-CSS-وميتا Tags.htm

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

وآمل أن يساعد هذا شخص:)

Answer 7

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

والإعلانات جميع فون، لاب توب جميع، كل في androids.

Answer 8

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

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

والتمتع:)

Answer 9

لماذا لا مجرد إعادة تحميل الصفحة عندما يدور المستخدم على الشاشة مع جافا سكريبت

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);