Css 最大设备宽度和移动web的最大宽度之间有什么区别？

我需要为iphone/android手机开发一些html页面，但是

max device width

和

max width

之间有什么区别？我需要为不同的屏幕大小使用不同的css

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

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

---

区别是什么？

最大设备宽度是设备渲染宽度

@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 */
}

---

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

max width

是目标显示区域的宽度，例如浏览器

max device width

是设备整个渲染区域的宽度，即实际设备屏幕的宽度

---

max height

和

max device height

自然也是如此。

max width

指的是视口的宽度，可与

max height

一起用于确定特定的尺寸或方向。使用多个

max-width

（或

min-width

）条件，您可以在调整浏览器大小或iPhone等设备上的方向变化时更改页面样式

---

max device width

指设备的视口大小，与方向、当前比例或大小无关。这在设备上不会更改，因此在屏幕旋转或调整大小时不能用于切换样式表或CSS指令。

不同之处在于最大设备宽度是所有屏幕的宽度，最大宽度是指浏览器显示页面所用的空间。但另一个重要的区别是android浏览器的支持，事实上，如果你打算使用最大设备宽度，这将只适用于Opera，相反，我确信最大宽度将适用于每种移动浏览器（我已经在Chrome、firefox和Opera for android上进行了测试）。

你认为使用这种风格怎么样？

对于主要用于“移动设备”的所有断点，我使用

min（max）-devicewidth

，对于主要用于“桌面”的断点，我使用

min（max）-width

有很多“移动设备”计算宽度的能力很差

看看：

---

如果您正在制作跨平台应用程序（例如使用phonegap/cordova），那么

---

不要使用设备宽度或设备高度。而是在CSS媒体查询中使用宽度或高度，因为Android设备会在设备宽度或设备高度方面出现问题。对于iOS来说，它工作得很好。只有android设备不支持设备宽度/设备高度。

不再使用设备宽度/高度

在媒体查询级别4中，不推荐使用设备宽度、设备高度和设备纵横比：

---

只需将宽度/高度（无最小/最大值）与方向和（最小/最大值-）分辨率结合使用，即可针对特定设备。在移动设备上，宽度/高度应与设备宽度/高度相同。

最大宽度是目标显示区域的宽度，例如浏览器最大设备宽度是设备整个渲染区域的宽度，即实际设备屏幕的宽度

•如果您使用的是最大设备宽度，当您更改桌面上浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置

---

•如果您使用的是最大宽度，当您更改桌面上浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会看到手机的样式，例如触摸友好菜单。

@media all和（max width:400px）{}有什么不同？答案是“单击”对我来说，这比公认的答案要好。这听起来像大多数应用程序，<代码>最大宽度和<代码>最大高度将是使用的。@ JackieChiles在另一个线程中做了一个很好的点，一个应该考虑的问题（关于更大的设备上出现的移动样式）：这个好答案并不完整：方向在Android上交换设备宽度和设备高度，但在iOS上不交换：请参阅。如果您想在调整浏览器大小时看到更改，请使用“最大宽度”进行开发，尽管“最大设备宽度”在生产中更准确。@JohnMagnolia是什么让您认为“最大设备宽度”更适合生产？“无论使用何种设备，“最大宽度”难道不能保证更好的响应能力吗？@eknown我同意。来自各种技能/知识的用户并不总是能够最大化他们的桌面浏览器窗口（但我还没有看到一款平板电脑或手机的浏览器没有最大化打开——我想这在混合应用程序中是可能的，但这是另一种情况）。“最大宽度”肯定更具普遍性。@eknown我不同意。根据您的风格，在点击该媒体断点后，您可能会有非常不同的外观，如果您是基于媒体断点加载样式表，则在调整浏览器窗口大小时，网站可能会呈现完全不同的外观。如果您的移动设备布局完全不同，最根本的原因可能是因为没有鼠标光标（它们需要更大的按钮和一列滚动）。在这种情况下，一个很好的媒体查询是

@媒体屏幕和（指针：粗略）和（悬停：无）

它将切换到移动版本，而不管将来移动设备的屏幕上有多少像素。相关：我发现，即使小屏幕设备没有

标签，

max width

如果没有

meta

标签，

max width

也能正常工作“设备xxx”项已弃用，“最大设备xxx”项未弃用。@RogerKrueger对此是否确定？我看不出有任何迹象表明最大设备xxx媒体查询未弃用。这并不能回答问题，而且实际上是处理断点的一种不好的方法-小心。

/* #### 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 */
}