メディアクエリとレスポンシブデザインについてすべて理解して整理したと思ったとき、一部のデバイスで奇妙な動作が見られ、混乱が生じました。
私の意図は、すべての異なるデバイス/解像度をカバーできる一連のメディア クエリを用意することです。いくつかの記事を例を見て実践し始めましたが、Samsung Galaxy SII モバイルでテストすると、期待どおりに動作しないようです。
まず、SII の解像度は 480x800 であると主張されています。この解像度がビデオ再生専用かどうかはわかりませんが、デザインを準備すると、幅 320px に収まるように見えます。
javascript screen.width および screen.height プロパティを使用して、どの解像度で動作しているかを確認しています。結果は次のとおりです。
ネイティブ ブラウザでは、ページを縦向きで読み込むと 320x450 の解像度が得られます。ただし、この同じブラウザでページを横向きにリロードすると、533x235 のサイズになります。ここでは、使用する向きに関係なく、同じ高さと幅になると予想されるので、十分に奇妙です。さらに、主張されているデバイスの解像度 480x800 に一致するものはありません。
Firefox ブラウザーを使用すると、横向きと縦向きの両方で 480x800 幅の画面プロパティを取得できますが、480px 幅の画像に合わせようとすると、実際には 320px 幅しかないように見えるため、収まりません。
実際、これらすべての場合の実際の解像度は 320x533 のようです。
誰でもこの奇妙な動作について説明がありますか?
それにアプローチし、すべての解決策をカバーするメディアクエリのセットを取得するためのアドバイスはありますか??
編集：：：：：：：：：：：：：：
ビューポートで試しました：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
それでも成功しません。実際、hexblot によって提供されたリンクの記事によると、「maximum-scale=1」はズームを無効にするべきではありませんが、私のデバイスでは有効です (iOS 用かもしれませんが、わかりません)。次のCSSリンクがあります：
<link rel='stylesheet' type='text/css' media='only screen and (max-width : 320px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xsmall.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 321px) and (max-width : 479px)' href='".home_url()."/wp-content/themes/twentyeleven/style-small.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 481px) and (max-width : 767px)' href='".home_url()."/wp-content/themes/twentyeleven/style-medium.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 768px) and (max-width : 959px)' href='".home_url()."/wp-content/themes/twentyeleven/style-large.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 960px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xlarge.css'>
デバイスでサイトにアクセスすると、style-xsmall.css (幅 320 ピクセルまで) を使用していることを確認できます。
正直なところ、実際の幅は、縦向きの場合は 320px (少なくとも Web ブラウジングの場合)、横向きの場合は 533px (奇妙なサイズ) のように見えます。
どんな手掛かり？