6

flotを使用してcanvasベースのグラフを作成する非常に基本的なWebページがあります（SOがレピュテーショングラフに使用するものと同様です）。

PCディスプレイの場合、幅（x軸）は高さの1.6倍で、通常どおりに出力する必要があります。

しかし、iPhoneの場合、ページが「縦向き」の向きでオーバーフローするのではなく、デフォルトで横向きになり、PCユーザーのように携帯電話を回してグラフを表示するようにユーザーに促したい（または強制した）場合は、それが必要です。

だから私の質問は：

1）縦向きの検出時にキャンバスを90度回転させる方法（CSS、JS、または単にHTMLヘッドタグを使用）はありますか？

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か？このAppleWebページを参照してください

3）自動回転を抑制できないと思います

于 2009-12-10T08:28:51.867 に答える
0

もう1つのオプションは、次のコードを使用して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 に答える