How to control screen-orientation for iPhone in we

Question

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

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

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.

So my questions are:

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) Is there a way, in general, to rotate elements/objects, regardless of who is viewing it?

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.

Thanks!

Answer 1

An other option is to target your CSS with the following code:

/* Portrait */
@media screen and (max-width: 320px){
    /* Place your style definitions here */
}

/* Landscape */
@media screen and (min-width: 321px){
    /* Place your style definitions here */
}

Answer 2

1/2) Did you try -web-transform? See this Apple web page

3) I think you can't inhibit the auto-rotation

Answer 3

Something like this.

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