移动网络的max-device-width和max-width有什么区别？

Question

我需要为iphone/android手机开发一些html页面,但是max-device-width和之间的区别是max-width什么？我需要为不同的屏幕尺寸使用不同的css.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

有什么不同？

Answer 1

max-width 是目标显示区域的宽度,例如浏览器

max-device-width 是设备整个渲染区域的宽度,即实际的设备屏幕

同样适用max-height并且max-device-height自然而然.

Answer 2

max-width指视口的宽度,可用于结合特定尺寸或方向max-height.使用多个max-width(或min-width)条件,您可以在浏览器调整大小时更改页面样式,或者在iPhone等设备上更改方向.

max-device-width无论方向,当前比例或调整大小,都指设备的视口大小.这不会在设备上更改,因此在旋转或调整屏幕大小时不能用于切换样式表或CSS指令.

Answer 3

你觉得使用这种风格怎么样？

对于主要用于"移动设备"的所有断点,我使用min(max)-device-width和断点主要用于"桌面"使用min(max)-width.

有很多"移动设备"严重计算宽度.

请访问http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml:

/* #### 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 (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* 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 */
}

Answer 4

max-device-width将具有常量值(可能为两个)

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

最大宽度是目标显示区域的宽度,表示浏览器的当前大小.

Answer 5

不同之处在于max-device-width是屏幕的全部宽度,max-width表示浏览器用于显示页面的空间.但另一个重要的区别是Android浏览器的支持,事实上如果你要使用max-device-width这只能用于Opera,相反我确信max-width适用于各种移动浏览器(我在Chrome,firefox和Opera for ANDROID中测试过它.

Answer 6

max-width是目标显示区域的宽度，例如浏览器；max-device-width是设备整个渲染区域的宽度，即实际设备屏幕的宽度。

• 如果您使用的是max-device-width，当您在桌面上更改浏览器窗口的大小时，CSS 样式不会更改为不同的媒体查询设置；

• 如果您使用的是max-width，当您在桌面上更改浏览器的大小时，CSS 将更改为不同的媒体查询设置，并且您可能会看到移动设备的样式，例如触摸友好的菜单。