iOSビューポート設定

iPad専用のウェブアプリを構築しています。現在、サイトを最適化するために、ページ幅を&に設定しようとしています。iOSビューポート設定

私が達成しようとしているのは、Webアプリケーションが、ユーザースケーリングなしでコンテンツの左右に空白のない状態で、横長モードと縦長モードの両方でフルスクリーンを表示させることです。

私はこれを達成することができます

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

と

max-width:1024px; 
min-width:768px;

問題、その後、変数幅のための私のCSSのすべてをコード化しています。私は実際にページ要素の幅を適切にコーディングできるように単一のCSS幅を持つことを好みます。

したがって、CSSの幅を1つに設定すると、ビューポートの設定が正しいとは言えません。これらの設定でポートレートでページを開くと、次の設定で

<meta name="viewport" content="width=device-width,user-scalable=no" />

すべてが正常に機能します。デバイスを横向きに回転させると、やはりすべてが良い状態になります。私が問題を抱えているのは、肖像画に戻ってくるところです。ページはビューポートには大きすぎます！私はそれがまだデバイスの幅に合わせて欲しい！

本当に簡単なようですね！何か不足していますか？私は実際にiPadを持っていないので（v2を保有している）、xcodeに付属のiOSシミュレータでテストしています - はでも違いはありません！

私はを使用しています。

出典

2011-01-11 Anonymous

これが役立つかどうかはわかりませんが、回転を検出して操作を実行する方法があります。ページを強制的にレンダリングしたり、スケーリングをチェックしたりすることがあります。しかし、これまでのところiPad上でこの問題に遭遇したことはありません。デバイス上でテストするためのページがありますか？

<body onorientationchange = "updateView();"> 

<script> 
    function updateView() 
    { 
     switch (window.orientation) 
     { 
      case 0: // Portrait 
       break; 
      case 90: ; // Landscape 
       break; 
      case -90: ; // Landscape counterclockwise 
       break; 
     } 
    } 
</script>

出典

2011-01-23 11:25:17

私の経験では、縦向きのiOSデバイスが「180」と報告しているだけで、そのケースを追加することができます。 –

答えて

関連する問題