는 방법을 제어하는 스크린 오리엔테이션 사이에서 웹 앱

Question

나는 아주 기본적인 사용하는 웹 페이지 flot 을 만들기 canvas 기반의 그래프(유사도를 사용에 대한 명성을 그래프).

의 경우에는 PC 전시,그것은 단순히 정상적으로 출력으로,폭(x-axis)는 1.6 배 높이입니다.

하지만 아이폰,고 싶다면 그것보다는 데 그것은 오버플로우에는"초상화"방향으로,페이지 기본값을 가로 방향으로 장려하고,(또는)사용자가 자신들을 볼 수있는 전화로 차트 PC 사용자는 것입니다.

그래서 제 질문은:

1)방법이 있을 사용하여(CSS,JS,또는 단순히 HTML head 태그)을 캔버스에 90 도 회전의 탐지에는 세로 방향?

2)이 있는 방법으로,일반적으로 회전하는 요소/객체 관계없이 누가가 그것을 보는?

3)는 방법이 있을 방지하의 아이폰의 기본 동작 회전의 콘텐츠 장치가 회전할 때?분명히 내가 원하는 사용자를 회전 장치에 따라 보고는 표시를 옆으로,그러나 나는 원하지 않는 그래프를 뒤집어 여전히 옆으로 때 그들은 전화,놀리는 그들을 계속하는 플립화는 그래프를 보유 여전히있다.

감사합니다!

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 웹 페이지의

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