如何控制Web应用程序的屏幕方向为iPhone

Question

我有一个使用海军报来创建基于canvas图（类似于SO声誉图形使用）一个非常基本的网页。

在一台PC的显示的情况下，它应该简单地输出通常，具有宽度（x轴）是1.6倍的高度。

但是，对于iPhone手机，我想，如果，而不是在“纵向”方向溢出拥有它，页面默认为横向，鼓励（或强迫）的用户把他们的手机，看看图表作为PC用户会

所以我的问题是：

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 */
}