android - メディアクエリロジック

Question

「レスポンシブデザイン」への非常に単純なアプローチとして、現在取り組んでいる Web サイト用に 2 つのバージョンの CSS があります。

画面幅が 700px を超えるすべてのデバイスに表示される通常の (モバイル以外の) バージョン。
合理化されたモバイルバージョンで、画面の幅が 700 ピクセル以下のデバイスに表示されます。

@media only screen and (max-device-width : 700px)クエリを使用して、CSS ルールの 2 つのセットを分離しました。

また、この JavaScript スニペットを使用して、画面の幅に基づいてビューポートメタタグパラメーターを割り当てます。

<script type="text/javascript">

var width = screen.width;
var height = screen.height; 
var meta = document.createElement("meta");
var head = document.getElementsByTagName("head")[0];

if (width >= 700) {
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=1000");
    head.appendChild(meta);
} else if (width <700) {
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width; initial-scale=1; maximum-scale=1");
    head.appendChild(meta);
};

</script>

このスクリプトは、デバイスの画面幅が 700 ピクセル以上の場合、ビューポートの幅を 1000 ピクセルに設定します。基本的に、非モバイルバージョンの Web サイトの幅全体が画面内に収まるようにします。画面幅が700px未満。

繰り返しますが、明確にするために、私が達成したいことは次のとおりです。画面幅が> 700pxの場合、通常の（モバイルではない）Webサイトを表示します。画面幅が <= 700px の場合、合理化された (モバイル) Web サイトを表示します。

結果は私を驚かせました：

Samsung Galaxy S (480x800) - 非モバイルバージョン、横向きおよび縦向きの位置
Samsung Galaxy S II (480x800) - 非モバイルバージョン、横向きおよび縦向き
Motorola Droid Razr (540x960) - 非モバイルバージョン、横向きおよび縦向き
Motorola Droid 4 (540x960) - 非モバイルバージョン、横向きおよび
縦向き
Motorola Photon 4G (540x960) - 非モバイルバージョン、横向きおよび縦向き
Motorola Atrix HD (720x1280) - モバイルバージョン (!)、横向きと縦向きの位置 (どちらの画面サイズもモバイルクエリを満たすよりも広いですが!)
Motorola Razr (540x960) - モバイル版、横向きと縦向きの位置 (横向きの位置が 700px より広い場合でも)
HTC Wildfire (240x320) - モバイル以外のバージョン (!)、横向きと縦向きの位置 (どちらも 700px よりも小さい最小の画面サイズですが!)
Sony Xperia X10 (480x854) - モバイル版、縦位置と横位置 (ただし、横位置は 700px より広い)
LG Optimus 3D (480x800) - 非モバイルバージョン、縦向きおよび
横向き
Amazon Kindle Fire 2 (600x1024) - モバイル版、縦向きと横向き (幅が 700px をはるかに超えていますが)

私が見た限りでは、モバイルデバイスはめちゃくちゃだと思います。ほとんどのデバイスは、最大の寸法を最大幅として認識しているようですが、一部 (Amazon Kindle 2) は、下位の寸法を「幅」として、上位の寸法を「高さ」として扱うようです。一部のデバイスの画面サイズは 700px 未満ですが、それ以上のサイズを「ふり」ます。

max-device-widthメディアクエリの定義要素として 700を使用しようとしたときに、誤ったロジックを使用したようです。

質問:次のルールでできるだけ多くのデバイスをカバーするメディアクエリを作成するには: 「現在の画面の幅が <= 700px の場合、モバイル CSS を適用する」 – 適切な追加条件は何ですか?

android - メディア クエリ ロジック

2 に答える 2

Related

Reference

android - メディアクエリロジック