6

我有一个非常基本的网页，它使用 flot 创建一个canvas基于图表（类似于 SO 用于信誉图）。

如果是 PC 显示器，它应该简单地正常输出，宽度（x 轴）为高度的 1.6 倍。

但是对于 iPhone，我希望它不是让它以“纵向”方向溢出，而是页面默认为横向，鼓励（或强迫）用户像 PC 用户一样转动手机查看图表。

所以我的问题是：

1) 有没有办法（使用 CSS、JS 或简单的 HTML 头部标签）让画布在检测到纵向时旋转 90 度？

2）一般来说，有没有办法旋转元素/对象，而不管谁在查看它？

3）有没有办法避免iPhone在设备旋转时旋转内容的默认行为？显然，我希望用户在看到设备侧向显示时旋转设备，但我不希望图表翻转并且当他们转动手机时仍然侧向，取笑他们继续翻转手机并且永远不会得到图表保持不动。

谢谢！

4

3 回答 3

2

像这样的东西。

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;
  }
}
于 2009-12-10T08:26:14.070 回答
1

1/2) 你试过了-web-transform吗？请参阅此Apple 网页

3）我认为你不能抑制自动旋转

于 2009-12-10T08:28:51.867 回答
0

另一种选择是使用以下代码定位您的 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 */
}
于 2010-12-23T17:34:33.950 回答