根据设备类型将 id 分配给 body 标签

Question

我想知道是否有任何方法可以根据设备类型为网页分配 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文件，但是我可以根据设备为body分配一个id吗？

Answer 1

您需要做的是使用称为媒体查询的 css 功能。

流程：在页面的头部标签中添加下面的元标签以在设备上正确显示页面（文本大小、宽度等...）

<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（三星 Galaxy）人像 380 x 685

iPad 纵向 768 x 1024

Kindle 肖像 600 x 1024

或者您可以使用插件来检测设备，并根据他们的设备将它们重定向到正确的页面（3 个不同的页面，或加载 3 个不同的 css 等）。注意：使用此解决方案，您的网站将无法响应，但可以在所有设备上运行。