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

Question

我有一个非常基本的网页,使用flot创建一个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;
  }
}