4

HTML5 ホーム画面を備えた iPad アプリケーションがあります。横向きモードと縦向きモード用に 2 つの異なるデザイン テンプレートを作成する必要があります。と で CSS を使用@mediaしorientation : landscapeますorientation : portrait。そして、それは私にとってとてもうまくいきます。しかし、デバイスの向きを変えるとタイムラグがあります。その結果、1 秒または 2 秒にわたって間違った要素のサイズが表示されることがあります。

この問題を解決するにはどうすればよいですか?

4

3 に答える 3

2

を削除する<meta name="viewport" content="width=device-width, initial-scale=1" >と、方向間のラグが 100% なくなりました (iPad2、iOS6、Safari ブラウザーを使用)。

さらに試行錯誤した結果、initial-scaleがラグの原因であることがわかりました。なんで？私の知識ベースの外。これは私が見つけたものです。ただし、向き initial-scale=1ごとにより多くの CSS スタイルを追加する必要があります。portrait/landscape

ブラウザは視覚的にすべてを縮小して収まるようにし、モードportraitで拡大しlandscapeます。

ビューポートに関する素晴らしい記事はこちらです。

于 2013-06-29T04:54:45.127 に答える
0

この答えはゲームに遅れていますが、(少なくとも最新バージョンの iOS - 6 以降では) すべてのビューポート スケール プロパティを宣言するとき、私ははるかにうまくいきました:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

これらすべてが宣言されているため、ポートレートとランドスケープの間の移行ははるかにスムーズで、遅延がはるかに少なくなります.

于 2013-07-06T16:54:11.513 に答える
-1

このラグを修正できない場合は、向きの変化にアニメーション効果を付けてスムーズにしようとすることができます。

最初にCSSで変換プロパティを適用し、移動するすべてのセレクターを適用します

#container, #header h1, #header h2, #header h3 {
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

この技術を使用している私のウェブサイトをご覧ください。

于 2012-06-27T08:03:36.190 に答える