1



私は現在、iPad で最適に表示されるように設計された Web サイトを開発していますが、ほとんどのモバイル ブラウザーでも適切に表示される必要があります。

CSS は 2048px の幅に基づいています。これは、ランドスケープ モードのときの iPad 3 のピクセル幅です。

次に、以下に示すようにビューポート メタ タグを使用しました。

<meta name="viewport" content="width=2048" />

このトピックに関するApple のドキュメントとAndroidのドキュメントを読んで、モバイル ブラウザは最初にビューポート メタ タグで定義されたより大きな領域に Web ページをレンダリングし、次にデバイスの幅に合わせて縮小することを理解しました。

これは iPad 2 ではうまく機能しますが、iPhone、iPhone Retina、Galaxy Nexus では幅がオーバーフローします。iPad 3 で Web サイトをテストする機会がありませんでした。

この動作はどのように説明できますか?

この問題について詳細を追加する必要がある場合は、お知らせください。
よろしくお願いします。

4

1 に答える 1

1

http://developer.android.com/guide/webapps/targeting.html#ViewportScaleを読む 秘訣は、デバイスの幅とビューポートのスケールのバランスを把握することです。

具体的には：

デフォルトの初期スケールは、Web ページがビューポート サイズに収まるように計算されます。デフォルトのビューポート幅は 800 ピクセルであるため、デバイスの画面解像度が幅 800 ピクセル未満の場合、画面に幅 800 ピクセルのページが収まるように、初期スケールはデフォルトで 1.0 未満になります。

初期縮尺を 2 に設定すると、ページが拡大されます。.5 に設定すると、縮小されます。最小値と最大値もこれらの属性を上書きできます

于 2013-02-15T20:01:24.990 に答える