كيفية التحكم في توجيه الشاشة ل iPhone في تطبيق الويب

Question

لدي صفحة ويب أساسية للغاية تستخدم Flot لإنشاء canvas الرسم البياني المستندئ (يشبه ما يستخدمه لسمعة الرسم البياني).

في حالة عرض جهاز الكمبيوتر، يجب إخراجه ببساطة بشكل طبيعي، مع وجود العرض (محور س) 1.6 مرة.

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

لذلك أسئلتي هي:

1) هل هناك طريقة (باستخدام CSS، JS، أو ببساطة علامات رأس HTML) لتدوير قماش 90 درجة على الكشف عن اتجاه صورة؟

2) هل هناك طريقة، بشكل عام، لتدوير العناصر / الكائنات، بغض النظر عن من ينظر إليه؟

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

شكرا!

Answer 1

شيء من هذا القبيل.

window.onorientationchange = function() {

  var orientation = window.orientation;
  switch(orientation) {
    case 0:

    document.body.setAttribute("class","portrait");

    break; 

    case 90:

    document.body.setAttribute("class","landscapeLeft");

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
    break;

    case -90: 

    document.body.setAttribute("class","landscapeRight");

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
    break;
  }
}

Answer 2

1/2) هل حاولت -web-transformب انظر الى هذا صفحة ويب أبل

3) أعتقد أنك لا تستطيع تمنع الدوران التلقائي

Answer 3

خيار آخر هو استهداف CSS الخاص بك مع التعليمات البرمجية التالية:

/* Portrait */
@media screen and (max-width: 320px){
    /* Place your style definitions here */
}

/* Landscape */
@media screen and (min-width: 321px){
    /* Place your style definitions here */
}