2

幅1000ピクセル、高さ850ピクセルのHTML要素があります（実際には、キャンバスタグにHTML5ゲームを含むiFrameですが、それが問題にならないことを願っています）。

ビューポートのスケールが常に要素全体を表示し、それ以上は表示しないように、要素をタブレットに表示したいと思います。したがって、タブレットが横向きモードで保持されている場合は、両側に空白が必要になります。ポートレートモードでは、下（および上？）に空白があります。

iPad2でのテストでは、ポートレートモードは箱から出してすぐに機能するようで、ビューポートは自動的に要素を上部に配置し、ズームして画像全体を正確に表示します。しかし、ランドスケープモードでは、同じことを行い、底を切り落とします。

viewportたとえば、メタタグのあらゆる種類の組み合わせを試しまし<meta name="viewport" content="height=850"/>たが、一貫して機能させることができないようです。

jQueryを使用して、ウィンドウサイズの変更に基づいてサイズを変更するソリューションを歓迎します。

4

3 に答える 3

2

iPad のビューポート サイズは、横モードで 1024 x 690 ピクセル、縦モードで 768 x 946 ピクセルです。

ビューポート メタ タグの initial-scale および maximum-scale プロパティを 0.768 に設定すると、ポートレート モードに正確に収まりますが、ランドスケープ モードではカットオフされません。

<meta name="viewport" content="width=device-width, initial-scale=0.768, maximum-scale=0.768">
于 2012-11-23T05:26:33.147 に答える
1

簡単な解決策は次のとおりです。

  1. 幅が指定された幅よりも小さいかどうかを確認します。
  2. 指定された幅よりも小さい場合は、ビュー ポート コードを開始します。

したがって、解決策は以下のとおりです。

$(document).ready(function(){
           if (screen.width < 767) {
                        var viewportContent = "width=device-width, maximum-scale=1, initial-scale=1";                            
                        document.getElementById('viewport').setAttribute('content', viewportContent);                         
            }
        });

動的に使用する代わりに。このコードは問題なく動作するはずです。

于 2013-10-01T15:23:01.383 に答える