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

Answer 2

1/2）你试过-web-transform吗？见Apple web page

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

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

3 个答案: