當前位置:首頁 > 技術教程>

響應式CSS3: 移動端開發中 max-device-width 與 max-width 的區別

發表日期:2018-10-09 18:29:37文章編輯:池州網站建設瀏覽次數:1580 標簽:    CSS,響應式,分辨率,寬度,PC端,移動端,自適應

翻譯自stackoverflow.com,源地址:http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web

 

有同學需要開發web頁在iphone/android手機上訪問,想問max-device-width 與 max-width 有什么區別,他打算針對不同的屏幕大小加載不同的樣式,就像下面這樣:

Html代碼  收藏代碼
  1. @media all and (max-device-width: 400px)  
  2.   
  3. @media all and (max-width: 400px)  

 

這兩者有什么不同?

max-width 指的是顯示區域的寬度,比如瀏覽器的顯示區域寬度

(max-width is the width of the target display area, e.g. the browser)

max-device-width 指的是設備整個渲染(顯示)區域的寬度,比如設備的實際屏幕大小,也就是設備分辨率 

(max-device-width is the width of the device’s entire rendering area, i.e. the actual device screen)

max-height 與 max-device-height  也是同理

更進一步說,max-width在窗口大小改變或橫豎屏轉換時會發生變化

max-device-width只與設備相關,橫豎屏轉換或改變尺寸,縮放都不會發生變化(部分android的寬高會互換而IOS不會) 

 

如何你需要調整瀏覽器大小查看頁面的變化,那開發過程中就使用 max-width,盡管在實際的生產環境中用max-device-width更精確

 

要是只關心兩者的區別,到這已經足夠了,下面是關于兩者在實際應用的區別,來自另一篇文章:

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

在CSS的媒體查詢中,width與device-width之間的區別總是讓人感到迷惑,下面就讓我們來闡述一下兩者的區別。

 

device- width指的是設備本身的寬度,也就是屏幕的分辨率,比如說你手機的分辨率是1440*900,這表示你的屏幕寬是1440px, 所以device-width是1440px。大部分的手機寬度不到480px,(當然今后的趨勢是越來越大)。iphone 4的device-width就只有320px,即便對外宣稱有640*960.這要歸功于iphone的retina顯示方式,也就是用兩個像素來表示屏幕上一個CSS像素,IPAD3也是這樣的。官方說IPAD3跟前幾代一樣采用的device-width是768px,它的實際分辨率達到了1536*2048,就是這個原因。

 

盡管device-width在指定特定的設備更有用,相比之下width在創建響應式頁面時用途更加廣泛。下面的表格是一個例子,

CSS Media Dimensions Device resolution (px) device-width/ device-height (px)
iPhone 320 x 480 320 x 480, in both portrait and landscape mode
iPhone 4 640 x 960 320 x 480, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 5, 5s 640 x 1136 320 x 568, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 6 750 x 1334 375 x 667, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 6 plus 1242 x 2208 414 x 736, in both portrait and landscape mode. device-pixel-ratio is 3
iPad 1 and 2 768 x 1024 768 x 1024, in both portrait and landscape mode
iPad 3 1536 x 2048 768 x 1024, in both portrait and landscape modeCSS pixel density is 2
Samsung Galaxy S I and II 480 x 800 320 x 533, in portrait modeCSS pixel density is 1.5
Samsung Galaxy S III 720 x 1280 360? x 640?, in portrait mode
HTC Evo 3D 540 x 960 360 x 640, portrait modeCSS pixel density is 1.5
Amazon Kindle Fire 1024 x 600 1024 x 600, landscape mode

( 也可以參考:CSS3 媒體查詢移動設備尺寸 Media Queries for Standard Devices)

需要注意的是,在蘋果設備上,device-width指的總是設備處于肖像模式時的寬,不會隨設備橫豎屏轉換變化,就是說不管怎么換,寬都是不會變的,高也一樣。

 

下面是一個通過媒體查詢區別設備和不同尺寸的例子:

  1. /* #### Mobile Phones Portrait #### */  
  2. @media screen and (max-device-width: 480px) and (orientation: portrait){  
  3. /* some CSS here */  
  4. }  
  5.   
  6. /* #### Mobile Phones Landscape #### */  
  7. @media screen and (max-device-width: 640px) and (orientation: landscape){  
  8. /* some CSS here */  
  9. }  
  10.   
  11. /* #### Mobile Phones Portrait or Landscape #### */  
  12. @media screen and (max-device-width: 640px){  
  13. /* some CSS here */  
  14. }  
  15.   
  16. /* #### iPhone 4+ Portrait or Landscape #### */  
  17. @media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){  
  18. /* some CSS here */  
  19. }  
  20.   
  21. /* #### iPhone 5 Portrait or Landscape #### */  
  22. @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){  
  23. /* some CSS here */  
  24. }  
  25.   
  26. /* #### iPhone 6 and 6 plus Portrait or Landscape #### */  
  27. @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){  
  28. /* some CSS here */  
  29. }  
  30.   
  31. /* #### Tablets Portrait or Landscape #### */  
  32. @media screen and (min-device-width: 768px) and (max-device-width: 1024px){  
  33. /* some CSS here */  
  34. }  
  35.   
  36. /* #### Desktops #### */  
  37. @media screen and (min-width: 1024px){  
  38. /* some CSS here */  
  39. }  

 

通過以上方式,我們的CSS媒體查詢方案已經很完善了,但為了頁面展示跟我們想像的一樣,還要增加一個viewport標簽: meta tag.

全站導航

其他新聞

帝國cms給最近新文章有new圖標

<ul> [e:loop={欄目ID,顯示條數,操作類型,只顯示有標題圖片}] <? $newimg="...

日期:2019-10-21

帝國CMS靈動標簽調用專題信息

帝國CMS內置的專題調用標簽總是不理想,調用不方便,還是靈動標簽調用來得方便...

日期:2019-09-14

當前欄目高亮適用于靈動標簽 或js

最近用帝國搭建了好幾個網站,發現有當前欄目要高亮顯示,通過網絡搜索發現好...

日期:2019-08-09

HTML5 meta viewport簡介

隨著移動端的流行,在移動端對網站進行重構和開發勢在必行。但是你只有了解了...

日期:2019-07-22

帝國ECMS做站常用代碼整理

獲取欄目網址:$classurl=sys_ReturnBqClassname($bqr,9);//取得欄目地址 ...

日期:2019-07-22

客戶案例

南京某環境治理公司手機響應式網站(基于bootstarp和帝國CMS)

網站首頁有部分延遲加載的內容,截圖的時候沒有全部截下來。各位可以直接到對...

日期:2019-09-23

池州某信息技術服務公司網站

網站使用的是PC+移動端判斷跳轉的。主色調為藍色,突出科技主題,呈現服務宗旨...

日期:2019-06-18

池州某加工生產企業工程公司官方網站

...

日期:2019-05-26

某縣生產力促進中心官方網站

...

日期:2019-05-26

廣東中山某大型機械工程公司官方網站

這是廣東一家大型進出口機械設備制造公司,實力雄厚。網站是響應式的??蛻魧?..

日期:2018-11-06

下载麻将游戏四人麻将 篮球比分直播7m简体 开心农场小游戏种菜下载 北京pk10四码全天计划 贵州十一选五走势012 长沙麻将技巧快速提高法 赚钱了音乐 91街机捕鱼网站 陕西11选5 2017电脑挂机赚钱软件排行 2018海南环岛赛吉祥物 e赢彩平台 江苏11选5 广西快乐双彩开奖情况 足彩二串一倍投可行吗 韩国快乐8 北单6场全包过滤