翻译自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 有什么区别,他打算针对不同的屏幕大小加载不同的样式,就像下面这样:
@media all and (max-device-width: 400px) @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在创建响应式页面时用途更加广泛。下面的表格是一个例子,
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指的总是设备处于肖像模式时的宽,不会随设备横竖屏转换变化,就是说不管怎么换,宽都是不会变的,高也一样。
下面是一个通过媒体查询区别设备和不同尺寸的例子:
/* #### Mobile Phones Portrait #### */ @media screen and (max-device-width: 480px) and (orientation: portrait){ /* some CSS here */ } /* #### Mobile Phones Landscape #### */ @media screen and (max-device-width: 640px) and (orientation: landscape){ /* some CSS here */ } /* #### Mobile Phones Portrait or Landscape #### */ @media screen and (max-device-width: 640px){ /* some CSS here */ } /* #### iPhone 4+ Portrait or Landscape #### */ @media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){ /* some CSS here */ } /* #### iPhone 5 Portrait or Landscape #### */ @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){ /* some CSS here */ } /* #### iPhone 6 and 6 plus Portrait or Landscape #### */ @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){ /* some CSS here */ } /* #### Tablets Portrait or Landscape #### */ @media screen and (min-device-width: 768px) and (max-device-width: 1024px){ /* some CSS here */ } /* #### Desktops #### */ @media screen and (min-width: 1024px){ /* some CSS here */ }
通过以上方式,我们的CSS媒体查询方案已经很完善了,但为了页面展示跟我们想像的一样,还要增加一个viewport标签: meta
tag.
了解更多请参考:CSS:媒体查询 CSS3 Media Queries
本文转自:CSS3: 移动端开发中 max-device-width 与 max-width 的区别
相关推荐
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:...
@custom-media --small-device ( max-width : 480 px )) : root { --primary-color : blue; --gutter : 30 px ; } /* component.css */ @import 'colors.config.css' . component { color : var ( --pr
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库 <!--<link rel="stylesheet" type="text/css" href="css/normalize.css" />-->...
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bottom{ bottom: 37px; } } /*iPhone XS max 适配*/ @media only screen and (device-...
#Iphone 4和4S /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-...
据了解,现在有两种rem布局的样式控制,其中一种是通过...@media only screen and (max-width: 600px), only screen and (max-device-width:400px) { html,body { font-size:50px; } } @media only screen and (ma
meta name=viewport content=width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no /> @media all and (max-width: 320px) { // do something } 了解过移动端开发
meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" ...
[css] min/max-width: 100% fix. |dropdown>, fix of "change" event generation when popup is shown. "change" is postponed until popup dismissal. [editing] fix of VK_LEFT/VK_RIGHT handling. more ...
#示例执行:node ress.js“ [” global.min.css“]”“ [{” device“:” m“,” width“:{” min“:320,” max“:639},”高度“:{” min“:480,” max“:640},” breakpoint“:767,” type“:[” ...
效果图 实现todolist整体思路: 思路图如果看着不方便 js代码里面已经做好详细注释 ToDoList—最简单的待办事项列表 ...@media screen and (max-device-width: 620px) { section { width: 96%; padding: 0 2%;