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

问题描述

我有一个非常基本的网页，使用flot创建一个画布基础图表（类似于SO用于声誉图表）。

I have a very basic web page that uses flot to create a canvas based graph (similar to what SO uses for reputation graph).

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

In the case of a PC display, it should simply output normally, with a the width (x-axis) being 1.6 times the height.

但是对于iPhones，我想它，如果，而不是让它溢出在肖像方向，页面默认为横向，鼓励（或强制）用户打开他们的手机看到图表作为PC用户会。

But for iPhones, I would like it if, rather than having it overflow in "portrait" orientation, the page defaulted to landscape orientation, encouraging (or forcing) the user to turn their phone to see the chart as PC users would.

所以我的问题是：

1）有一种方法（使用CSS，JS或简单的HTML头部标签）使画布在检测到纵向方向时旋转90度？

1) Is there a way (using CSS, JS, or simply HTML head tags) to have the canvas rotate 90 degrees on detection of a portrait orientation?

2）有一种方法，一般来说，旋转元素/对象，谁在查看它？

2) Is there a way, in general, to rotate elements/objects, regardless of who is viewing it?

3）有没有办法避免iPhone的默认行为，当设备旋转时旋转内容？显然，我想让用户旋转设备，看到它已经显示了侧面，但我不想要图表翻转和STILL侧身时，他们打开电话，逗他们继续翻转手机，永远不会

3) Is there a way to avoid the iPhone's default behavior of rotating the content when the device is rotated? Obviously I want the user to rotate the device upon seeing that it has shown up sideways, but I don't want the graph to flip over and STILL be sideways when they turn the phone, teasing them to continue to flip the phone and never getting the graph to hold still.

谢谢！

推荐答案

这。

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

这篇关于如何在网络应用程序中控制iPhone的屏幕方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！