css - 移动网络的 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 自然也是如此。