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

Question

我有一个非常基本的网页，使用flot创建了一个canvas图表（类似于SO用于声望图表的内容）。

在PC显示器上，它应该正常输出，宽度（x轴）是高度的1.6倍。

但是对于iPhone，我希望它不会在“竖屏”方向上溢出，而是默认为横屏方向，鼓励（或强制）用户像PC用户一样旋转手机来查看图表。

所以我的问题是：

1）是否有一种方法（使用CSS，JS或简单的HTML头标签），可以在检测到竖屏方向时将画布旋转90度？

2）是否有一种方法，可以旋转元素/对象，无论谁查看它？

3）是否有一种方法可以避免iPhone在设备旋转时旋转内容的默认行为？显然，我希望用户在看到它侧着时旋转设备，但我不希望图表翻转并仍然侧着，这会引诱他们继续翻转手机，永远无法使图表保持静止。

谢谢！

- Anthony

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;
  }
}

- Robert Cabri

---

这绝对是我所想的。非常优雅，因为它考虑了用户旋转设备时iPhone检测到旋转和未检测到旋转的情况。 - Anthony

Answer 2

1/2) 你试过使用 -web-transform 吗？看看这个 苹果网页。

3) 我认为你无法禁止自动旋转。

- muccy

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

- Koen.