html - 设备屏幕@media 查询

Question

我在 CSS 中有媒体查询:

@media only screen and (max-device-width: 480px) and (min-device-width: 320px)

当我在 Google Chrome 中打开 elements inspector 并选择设备 iPhone 4 时，它显示的屏幕与原始 iPhone 4s 屏幕和其他一些手机屏幕不同。为什么？我做错了什么？

如何在我的谷歌浏览器或其他浏览器中查看 iPhone 4 页面的原始外观？有什么解决办法吗？

它在 iPhone 4 上的外观:

当我选择设备 iPhone 4(在左上角)时，它在 Google Chrome 中的显示方式:

Answer 1

代替

(max-device-width: 480px) and (min-device-width: 320px)

仅使用

(max-width: 480px) and (min-width: 320px)

为什么？

min/max-width

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

min/max-device-width

Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.