根據設備類型爲body標籤分配id

我想知道是否有任何方法可以根據設備類型爲網頁分配id。例如，我的CSS設置如下根據設備類型爲body標籤分配id

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

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

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

我想要做的就是這些ID分配到身體的標籤，我知道有辦法檢測設備，並分配一個CSS文件，但我可以根據設備爲身體分配一個ID嗎？

來源

2013-07-11 J.Fenty

你可以在CSS中使用媒體查詢而不是添加ID。和[**這裏是一個問題，是非常類似於你**]（http://stackoverflow.com/questions/5558361/javascript-change-body-id-with-css-dynamically-with-respect-to-瀏覽器窗口）的答案，解釋如何添加id與js^_^ –

你需要做的是使用稱爲媒體查詢的CSS功能。

過程：加在你的頁面下面的meta標籤的head標籤，以顯示對設備正確的網頁（文字大小，寬度等）

<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×480

iPhone 5肖像320×568

蹩腳的Android肖像240×320

Android（三星Galaxy ）縱向380 685

iPad的畫像768×1024

Kindle的畫像600×1024

或者你可以使用一個插件，檢測設備，並重定向到正確的頁面（3個不同的網頁，或加載3個不同的CSS等）根據他們的設備。注意：使用此解決方案，您的網站將無法響應，但它將適用於所有設備。

來源

2013-07-11 17:02:19 Romain

感謝您的解決方案，我想避免必須建立多個網頁，所以我覺得使用@media的方法最有用 –

根據設備類型爲body標籤分配id

回答

相關問題