移动网站的最大设备宽度和最大宽度有什么区别？
我需要为iPhone / Android手机开发一些HTML页面，但最大设备宽度和最大宽度有什么区别？ 我需要为不同的屏幕尺寸使用不同的CSS。
@media all and (max-device-width: 400px) @media all and (max-width: 400px) 有什么不同？
max-width是目标显示区域的宽度，例如浏览器
max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕
自然也同样适用于max-height和max-device-height 。
max-width是指视口的宽度，可以用来将特定尺寸或方向与max-height结合使用。 使用多个max-width （或min-width ）的条件，你可以改变页面样式，因为浏览器被resize或方向改变像iPhone一样的设备。
max-device-width是指max-device-width的视口大小，而不pipe方向，当前比例或resize。 这不会在设备上改变，因此不能在屏幕旋转或resize时切换样式表或CSS指令。
你怎么看待这种风格？
对于主要用于“移动设备”的所有断点，我使用min(max)-device-width和主要用于“桌面”的断点使用min(max)-device-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 */ }
不同的是，max-device-width是所有的屏幕宽度，max-width是浏览器用来显示页面的空间。 但另一个重要的区别是Android浏览器的支持，事实上，如果你打算使用最大设备宽度，这将只在Opera工作，而我相信，最大宽度将适用于每种手机浏览器我已经在Chrome，Firefox和歌剧testing它的ANDROID）。
最大设备宽度将有不变的值（可能是两个）
@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 */ }
最大宽度是目标显示区域的宽度，意味着当前浏览器的大小。
如果您正在制作跨平台的应用程序（例如使用phonegap / cordova），那么，
请勿使用设备宽度或设备高度。 而是在CSS媒体查询中使用宽度或高度，因为Android设备会给设备宽度或设备高度带来问题。 对于iOS，它工作正常。 只有android设备不支持设备宽度/设备高度。
最大宽度是目标显示区域的宽度，例如浏览器; max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕。
•如果使用最大设备宽度 ，当您更改桌面上浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置;
•如果使用最大宽度 ，当您更改桌面上浏览器的大小时，CSS将更改为不同的媒体查询设置，并且可能会显示移动设备的样式，例如触摸式菜单。
不要再使用设备宽度/高度。
设备宽度，设备高度和设备宽高比在Media Queries Level 4中已弃用： https ： //developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features
只需使用宽度/高度（无最小值/最大值）并结合方向和（最小/最大值）分辨率，即可针对特定设备。 移动宽度/高度应与设备宽度/高度相同。
