CSS媒體查詢中的寬度和設備寬度之間的差異

Question

高度和寬度以及設備寬度和設備高度之間有什麼區別（簡單來說）？

Answer 1

device-width是輸出裝置的...

寬度（意味着整個屏幕或頁面，而不是僅僅呈現區域，諸如文檔窗口）。

Source。

width該...

描述了輸出裝置（諸如文檔窗口的寬度，或在網頁盒的打印機上的寬度）

的渲染表面的寬度

Source。

Answer 2

device-width描述輸出設備的高度（意味着整個屏幕或頁面，而不僅僅是渲染區域，如文檔窗口）。

儘管CSS屬性指定了元素的內容區域的高度。內容區域位於元素的填充，邊框和邊距內。

來源：https://developer.mozilla.org/en/CSS/

更多有關媒體查詢，請參閱：http://www.w3.org/TR/css3-mediaqueries/

Answer 3

如果定義device-width意味着你的CSS特別是當你在iPhone中打開網頁呼叫，ipad公司的iPod &移動設備。例如：

@media only screen and (max-device-width:480px){ 
     body{ 
      color:red; 
     } 
    } 

或者如果你定義的寬度，這意味着你的特定CSS調用時，你的窗口調整大小。 例如：

@media only screen and (min-width: 481px) and (max-width: 1024px) { 
     body{ 
     color:yellow; 
     } 
    } 

更多信息請http://webdesignerwall.com/tutorials/css3-media-queries，不是遲到的回答http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/

Answer 4

更多的希望它會幫助一些一

在CSS介質寬度和裝置 - 之間的區別寬度可以是一個 位混亂，所以讓我們稍微解釋一下。 設備寬度指 寬度設備本身的，換句話說，的 設備屏幕分辨率。假設你的屏幕分辨率是1440 x 900.這個 意味着屏幕是1440像素，所以它的設備寬度爲 1440px。大多數手機的設備寬度爲480像素或更低， 包括流行的iPhone 4（設備寬度：320像素），儘管其技術上 的分辨率爲640 x 960。這是由於iPhone 4的 視網膜顯示屏，它將兩個設備像素固定在屏幕上的每個CSS像素上。 Ipad 3也是如此;其報告的 設備寬度爲768px，就像其前輩一樣，儘管其實際屏幕分辨率爲爲1536px x 2048px。一般來說寬度更 多功能當涉及到創建響應網頁，儘管當要專門針對移動 設備（和不與例如一個小的瀏覽器窗口桌面）

設備寬度是有用如從developer.mozilla.org，

寬度：
值：介質：視覺，觸覺
接受最小/最大前綴：是

寬度媒體特徵描述了輸出裝置（的渲染表面 的寬度諸如文檔窗口的寬度，或在打印機上的 寬度的頁框的）。

注意：由於用戶根據媒體查詢使用寬度和高度媒體功能調整窗口瀏覽器切換樣式表的大小。 ！

我發現這篇文章很有意思，從javascriptkit： http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 5

如果你是一個跨平臺的應用程序（例如，使用的PhoneGap /科爾多瓦），那麼，

不要使用設備寬度或設備高度。而是在CSS媒體查詢中使用寬度或高度，因爲Android設備會給設備寬度或設備高度帶來問題。對於iOS，它工作正常。只有android設備不支持設備寬度/設備高度。