私のモバイル デバイスは HTC One X、解像度: 720x1280 です。
レスポンシブ Web ページを実行する必要があります
htmlで私は書きます<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
しかし、ブラウザでは幅が 360px です。$(window).width()または を使用して確認しましたdocument.width
幅 360 ピクセルでレンダリングされますが、奥行きは 720 ピクセルです。つまり、通常の 1 ピクセルを表示するのに 4 ピクセルを使用します。そのため、画像が 2 倍のサイズに拡大されるため、通常のグラフィックはすべてぼやけて表示されます。したがって、解決策は、2 倍のサイズの画像を作成し、それらを 50% 縮小することです。
私の知る限りでは、視点を宣言するときの構文は次のようになります。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
セミコロンの代わりにコンマを使用していること、および終了 /> の直前には何もないことに注意してください。
私が読んだことによると、セミコロンを使用すると、特定のブラウザーで問題が発生する可能性があります。
幸運を！
それは、スケーリングされた解像度ではなく、圧縮された解像度である可能性があります。
スマートフォンの仕様を見ると、4.7 インチの画面の解像度が 1280 ピクセル x 720 ピクセルであることがわかります。仕様を参照してください。これは私の 13 インチ Macbook とほぼ同じ解像度ですが、私の Macbook は幅が 2 倍以上あるため、これは不可能です。したがって、彼らは圧縮された解像度を販売していますが、これはブラウザーがメディア クエリの処理で考慮する解像度ではありません。