1

デバイスの種類に基づいて Web ページに ID を割り当てる方法があるかどうか疑問に思っています。たとえば、次のようにcssを設定しています

#desktop {
min-width:1200px;
min-height:500px;
}

#tablet {
min-width:600px;
min-height:480px;

#mobile {
min-width:320px;
min-height:400px;

私がやりたいのは、これらの ID を body タグに割り当てることです。デバイスを検出して css ファイルを割り当てる方法があることは知っていますが、デバイスに基づいて ID を本体に割り当てることはできますか?

4

1 に答える 1

4

必要なことは、メディア クエリと呼ばれる CSS 機能を使用することです。

プロセス: デバイスでページを正しく表示するために、ページの head タグに以下の meta タグを追加します (テキストのサイズ、幅など...)。

<meta name="viewport" content="width=device-width" />

また

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

オンラインで確認して違いを確認したり、ズームを有効にしたり...

次に、CSSで、次のように構築する必要があります

CSS

Your curent css is here (for desktop)
    #the_name_of_the_div_is_the_same{
        width:100%;
        background-color:yellow;
    }

/* This are the 4 principals size of screen: */
/* No body is using this one
@media screen and (max-width: 1680px) {
    #the_name_of_the_div_is_the_same{
       Do something in css
    }
}*/

/* Then, if the width of the screen is under 960px and above 758px, your div will get this attributes */
@media screen and (max-width: 960px) {
    #the_name_of_the_div_is_the_same{
        width:80%;
        background-color:red;
    }
}

@media screen and (max-width: 758px) {
    #the_name_of_the_div_is_the_same{
        width:30%;
        background-color: black;
    }
}

@media screen and (max-width: 524px) {
    #the_name_of_the_div_is_the_same{
        width:70%;
        background-color: green;
    }
}

寸法:

iPhone 3+4 縦 w320 x 480

iPhone 5 縦長 320 x 568

くだらない Android のポートレート 240 x 320

Android (Samsung Galaxy) 縦 380 x 685

iPad 縦長 768 x 1024

Kindle縦長 600×1024

または、プラグインを使用してデバイスを検出し、デバイスに応じて正しいページ (3 つの異なるページ、または 3 つの異なる CSS をロードするなど) にリダイレクトすることができます。注: このソリューションを使用すると、Web サイトは応答しなくなりますが、すべてのデバイスで動作します。

于 2013-07-11T17:02:19.053 に答える