2

この問題があります: 使用するデバイスに応じて表示が異なる Web サイトをコーディングしたいと考えています。私が欲しいのは次のようなものです：

if (screen.width < 400) useLayout(1);
else if (screen.width >=400 and screen.width < 800) useLayout(2);
else useLayout(3);

今問題は、モバイル デバイス用にコーディングすると、javascript によって報告される画面幅が、メタタグ ビューポートを使用して設定したものになることです。したがって、次のファイルを作成すると:

<meta id='viewport' name='viewport' content='width=410'>

次に、javascript (window.screen.widthと の両方) を使用するとdocument.documentElement.clientWidth、戻り値は正確に 410 になります。この値は、実際の表示サイズを反映していません...

私が本当に必要としているのは、そのデバイスで 100 ピクセルが何インチ (または cm) であるかを理解することです...

何か方法はありますか？ありがとう

4

1 に答える 1

0

これが JavaScript のタグ付けされていることは知っていますが、適切な解決策ではないと思います。CSS にはこれが組み込まれています。デザイン レイヤーをスクリプトからできるだけ遠ざけることをお勧めします。CSS レスポンシブ デザイン /メディア クエリを調べてください。

例：

@media screen and (max-width:399px) { 
    body {
        background-color : 'red';
    }
}
@media screen and (min-width:400px) and (max-width:799px) { 
    body {
        background-color : 'blue';
    }
}
@media screen and (min-width:800px) { 
    body {
        background-color : 'green';
    }
}

それらを独自の CSS ファイルに分離して、該当しないユーザーへの冗長な CSS データ転送を最小限に抑えることもできます。

<link rel="stylesheet" media="screen and (max-width:399px)" href="layout1.css" />
<link rel="stylesheet" media="screen and (min-width:400px) and (max-width:799px)" href="layout2.css" />
<link rel="stylesheet" media="screen and (min-width:800px)" href="layout3.css" />

from JS を使用した画面の不正確さについての質問に答えるには、それほどカット アンド ドライではなく、解釈の差異のための余地が必要です。

于 2013-03-15T19:13:48.257 に答える