كيف يمكنني قفل التوجه إلى وضع صورة في اي فون تطبيقات الويب ؟

Question

أنا بناء اي فون التطبيق على شبكة الإنترنت و تريد قفل التوجه إلى وضع عمودي.هل هذا ممكن ؟ هل هناك أي web-طقم ملحقات أن تفعل هذا ؟

يرجى ملاحظة هذا هو تطبيق مكتوب في HTML و جافا سكريبت للجوال سفاري ، فإنه ليس من التطبيق الأصلي كتب في الهدف-C.

Answer 1

ويمكنك تحديد الأنماط CSS على أساس الميول العرض: استهداف المتصفح مع الجسم [توجيه = "المشهد"] أو هيئة [توجيه = "صورة"]

http://www.evotech.net / بلوق / 2007/07 / على شبكة الانترنت لتطوير ل-ث-فون /

ولكن ...

والنهج أبل لهذه المسألة هو السماح للمطور لتغيير CSS على أساس تغيير التوجه ولكن ليس لمنع إعادة توجيه تماما. لقد وجدت سؤال مماثل في مكان آخر:

HTTP: // نسأل. metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

Answer 2

وهذا هو الحل hacky جدا، لكنه على الأقل شيئا (؟). والفكرة هي أن استخدام CSS تحويل لتدوير محتويات صفحتك إلى وضع شبه عمودي. وهنا شفرة جافا سكريبت (معبرا عنه مسج) للحصول على انك بدأته:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

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

واليسار باعتبارها ممارسة للقارئ: في شعبة تدور حول المنتصف، لذلك من المحتمل أن تحتاج إلى تعديل موقفها إلا إذا كان مربع تماما

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

body > div { -webkit-transition: all 1s ease-in-out; }

لCSS الخاص بك. عندما يدور الجهاز، ثم سفاري ذلك، ثم محتوى صفحتك لا. الخدعة!

Answer 3

وهذا الجواب ليس من الممكن بعد، ولكن أنا نشرها ل "أجيال المستقبل". نأمل، في يوم من الأيام سوف تكون قادرة على القيام بذلك عن طريق حكم CSSviewport:

@viewport {
    orientation: portrait;
}

والمواصفات (في العملية):
https://drafts.csswg.org/css-device-adapt/#orientation -desc

وMDN:
https://developer.mozilla.org/en-US/ مستندات / الانترنت / CSS / @ العرض / التوجه

واستنادا إلى الجدول متصفح التوافق MDN والمادة التالية، يبدو أن هناك بعض الدعم في إصدارات معينة من IE والأوبرا:
http://menacingcloud.com/؟c=cssViewportOrMetaTag

وهذه شبيبة API المواصفات يبدو أيضا ذات الصلة:
https://w3c.github.io/screen-orientation/

وكنت قد افترضت أن لأنه كان من الممكن مع حكم @viewport المقترحة، وأنه من الممكن من خلال وضع orientation في إعدادات العرض في علامة meta، ولكن لم يكن لدي أي نجاح مع هذا حتى الآن.

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

Answer 4

وكانت تستخدم التعليمة البرمجية التالية في اللعبة HTML5 لدينا.

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});

Answer 5

وخطرت لي هذه CSS الطريقة فقط لتدوير الشاشة باستخدام استفسارات وسائل الإعلام. تستند الاستعلامات على الشاشة أحجام href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/"> . 480px يبدو أن سلعة ما ليس لديها أجهزة قليلة / أكثر من 480px عرض أو أقل من 480px ارتفاع.

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

Answer 6

Screen.lockOrientation() يحل هذه المشكلة, على الرغم من الدعم هو أقل من العالمي في ذلك الوقت (أبريل 2017):

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

Answer 7

وأنا أحب فكرة تشرح للمستخدم أن يضع هاتفه مرة أخرى في وضع عمودي. كما هو مذكور هنا: <لأ href = "http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/" يختلط = "نوفولو" عنوان = "منع اتجاه أفقي من اي فون تطبيقات الويب "> http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... ولكن باستخدام CSS بدلا من جافا سكريبت.

Answer 8

وربما في المستقبل الجديد الذي سيكون له soludion الخروج من مربع ...

وأما بالنسبة مايو 2015،

وهناك وظائف التجريبية أن يفعل ذلك.

ولكن يعمل فقط على فايرفوكس 18+، IE11 +، والكروم 38 +.

ومع ذلك، فإنه لا يعمل على أوبرا أو سفاري حتى الان.

https://developer.mozilla.org/ أون-US / مستندات / الانترنت / API / الشاشة / lockOrientation # Browser_compatibility

وهنا هو رمز الحالي لمتصفحات متوافقة:

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

lockOrientation("landscape-primary");

Answer 9

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

وهذا، أو حل CSS مماثل، على الأقل الحفاظ على التصميم الخاص بك إذا كان هذا هو ما كنت بعد.

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

Answer 10

في القهوة إذا كان أي شخص يحتاج إليها.

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"

Answer 11

وحين لم تتمكن من منع تغير التوجه من اتخاذ التأثير الذي يمكن أن تحاكي أي تغيير كما جاء في إجابات أخرى.

وكشف عن أول جهاز التوجيه أو إعادة التوجيه، وذلك باستخدام جافا سكريبت، إضافة اسم الفئة لعنصر التفاف (في هذا المثال يمكنني استخدام علامة الجسم).

function deviceOrientation() {
  var body = document.body;
  switch(window.orientation) {
    case 90:
      body.classList = '';
      body.classList.add('rotation90');
      break;
    case -90:
      body.classList = '';
      body.classList.add('rotation-90');
      break;
    default:
      body.classList = '';
      body.classList.add('portrait');
      break;
  }
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();

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

@media screen and (orientation: landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform-origin: 0 0;
  }
}

والآن، إعادة توجيه العنصر الأساسي والشرائح (ترجمة) في الموقف.

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}

Answer 12

ومستوحاة من @ الجواب Grumdrig ل، ولأن بعض الإرشادات المستخدمة لن يجدي نفعا، وأنا أقترح البرنامج النصي التالي إذا لزم الأمر من قبل شخص آخر:

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });

Answer 13

انقر هنا للحصول على البرنامج التعليمي والعمل سبيل المثال من موقع الويب الخاص بي.

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

لجعل هذا العمل في عام 2015 نحن بحاجة إلى:

• قرطبة (أي إصدار على الرغم من أي شيء فوق 4.0 هو الأفضل)
• PhoneGap (حتى يمكنك استخدام PhoneGap, الإضافات متوافقة)

واحدة من هذه الإضافات اعتمادا على قرطبة الإصدار:

• صافي.yoik.قرطبة.الإضافات.screenorientation (قرطبة < 4)

قرطبة المساعد إضافة صافي.yoik.قرطبة.الإضافات.screenorientation

• قرطبة المساعد إضافة قرطبة-المساعد-شاشة-التوجه (قرطبة >= 4)

قرطبة المساعد إضافة قرطبة-المساعد-شاشة-التوجه

و قفل اتجاه الشاشة فقط استخدام هذه الدالة:

screen.lockOrientation('landscape');

لفتحه:

screen.unlockOrientation();

ممكن التوجهات:

• صورة الابتدائي التوجه هو في الابتدائي وضع عمودي.

• صورة-ثانوية التوجه هو في الثانوي وضع عمودي.

• المناظر الطبيعية الابتدائي التوجه هو في الابتدائي وضع أفقي.

• المشهد-ثانوية التوجه هو في الثانوي وضع أفقي.

• صورة التوجه هو إما صورة الابتدائي أو صورة الثانوي (استشعار).

• المناظر الطبيعية التوجه هو إما أفقي-الابتدائية أو المناظر الطبيعية الثانوي (استشعار).