メタビューポートタグを使用しているにもかかわらず、本体に最小幅が割り当てられている場合でも、SafariとIEモバイルがロード時にページを拡大する理由を誰かが知っていますか？私はたくさん検索しましたが、私の特定のケースは文書化されていないようですので、完全に詳しく説明します。
私はすでにこれをヘッダーに持っています：
<meta name="Viewport" content="width=device-width, initial-scale=1">
私のページはAndroidブラウザで完全に拡大縮小されています。各スタイルシートには、スタイルシートが誤ってロードされた場合に比率を適用するための次のコードがあります。
body {
min-width:(whatever the minimum device width is for the media query);
}
したがって、iPhone 4およびその他の高DPIディスプレイの場合、次のようになります。
body {
min-width:640px;
}
最小幅を削除すると、iPhone 4でスケールが大きく拡大されたように見えますが、横スクロールはありません。つまり、テキストは大きくなりますが、幅は実際にはもうオーバーフローしていません。同じスタイルシートをロードして完全に表示されるAndroidと比較すると、これは完全に間違っています。タグを次のように変更することで修正できます。
<meta name="Viewport" content="width=device-width, initial-scale=0.5">
しかし、これは他のすべてのブラウザで小さなテキストズームの問題を引き起こすだけです。ほとんどの人が少数の人に対応するために問題を引き起こします。ダメ。
ここで重要なのは、一部のモバイルブラウザは、デフォルトのズーム設定に基づいてさまざまなメディアクエリを読み取ることです。私の場合は次のようになります（スペースを節約するための簡略化されたメディアクエリ）：
<link media="only screen and (min-device-width:0px) and (max-device-width:1280px)" href="webfiles/mob_default.css" />
<link media="only screen and (min-device-width:640px) and (max-device-width:1280px)" href="webfiles/mob_vhigh.css" />
<link media="only screen and (min-device-width:480px) and (max-device-width:639px)" href="webfiles/mob_high.css" />
<link media="only screen and (min-device-width:360px) and (max-device-width:479px)" href="webfiles/mob_mid.css" />
<link media="only screen and (min-device-width:0px) and (max-device-width:359px)" href="webfiles/mob_small.css" />
<link media="only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) and (min-device-width:640px)" href="webfiles/mob_vhigh.css" />
デフォルトのAndroidブラウザを使用するMotorolaRAZR（540x800px）で、デフォルトのズームが次のように設定されている場合：
- 'far'、それは480-639px幅のスタイルシートをロードします。（画面の物理的な解像度に合わせて修正）
- 'mid'、360-479px幅のスタイルシートをロードします
- 'close'は、'0-359px幅のスタイルシートをロードします
これは実際には、ページを物理的に拡大して横スクロールを必要とするよりも、ズームを処理するためのより洗練された方法ですが、デフォルトのズームがどのように処理されたかを知らないと、メディアクエリが機能しない理由を見つけるために多くの無駄な時間が発生しました。 '。
私がすべてに言及した理由は、IE mobileまたはSafariでデフォルトのズーム設定を調整するオプションがないようです（iPhoneのDolphinでもこれをテストしました。同じ結果です）。Safari、Dolphin、IEの暴徒がズームを異なる方法で処理したかどうかを確認したかったのです。私の問題は元々Androidを悩ませていて、SafariとDolphinで正常に動作していたため（<meta = "Viewport" ...>タグを追加する前）、デフォルトのズームが唯一の疑いでした。何か案は？