0

HTML5ボイラープレートでJQMを使用しています。私の目的（テスト目的）は、デスクトップブラウザーに、実際のデバイスでのアプリの予想サイズ領域を表示する全体的なdivを設定することです。ただし、デスクトップブラウザでは、iphone4ブラウザの幅のレイアウトと比較した幅が一致していないようです。ビューポートのメタ定義を変更したくありませんが、それが私の問題だと思います。誰かが私に説明できますか：

サイズ640x960 px（1 pxの境界線と絶対位置）のdivのサイズが、このタイプのセットアップで実際のデバイスの同じサイズの領域の外観を反映しないのはなぜですか？

よろしく。

4

2 に答える 2

1

Chromeの開発者ツールを使用するだけです。ユーザーエージェントとさまざまなデバイスのデバイスメトリックをスプーフィングすることを選択できます。

Chromeの場合：

  1. F12を押します。
  2. 右下のギアアイコン（設定）をクリックします。
  3. [上書き]タブをクリックします。
  4. ここで、ユーザーエージェント文字列を変更するか、特定のデバイス（iPhoneなど）に一致するようにブラウザのビューポートを上書きするかを選択できます。iPhoneを模倣するようにユーザーエージェント文字列を変更した場合、デバイスメトリックは、同じデバイスに適切なサイズになるように自動調整する必要があります。

Chrome Developer Toolsを開いたままにしておく必要があることに注意してください。閉じるとすぐに、UAスプーフィングとDeviceMetricsスプーフィングも失われます。

質問に直接答えるために、画面が異なればピクセル密度も異なるため、ピクセル密度が高い画面では、より小さな物理領域に同じ数のピクセルが表示されます。

于 2012-10-22T19:23:09.187 に答える
0

アドオンとして、

CSSメディアクエリを処理する場合、

  • device-widthそしてその
  • width。

たとえば、iphone4の場合、解像度は

  • （widthx height）は（640 x 960）に等しく、

デバイスは実際に提示しています

  • （device-widthx device-height）は（320 x 480）に等しい

ここから、各CSSピクセルが2画面解像度のピクセルによって処理されることがわかります。これは、2つの異なるサイズの結果です。

このヘルプ：さまざまなデバイスのピクセル密度

于 2012-10-22T23:10:11.930 に答える