iphone - デスクトップ上の iPhone ビューポート

Question

CSS に触れずに、(アプリの開発中に) デスクトップのビューポートを iPhone の画面サイズに設定するにはどうすればよいですか?

jQueryMobile を使用してアプリを開発しています。

Answer 1

ビューポートの昔ながらの定義 (スケーリングとviewportメタ タグが iPhone で一般的になる前) は、html要素のサイズだけです。したがって、次のようにスタイルを設定できます。

html {
    position: absolute;
    width: 320px;
    height: 480px;
}

または、ブラウザー拡張機能 (Firefox の「Web 開発者ツールバー」など) を使用して、ブラウザー ウィンドウのサイズをビューポートのサイズに変更します。

Answer 2

iPhone なのかブラウザなのかを検出し、それに応じてスタイルを設定してみませんか。

if(navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false )
{
    //ios detected
}
else
{
    //no ios detected, add css to set the dimensions of the body
}

このように、css はブラウザでのみ影響を受けます。