Question

我在CSS中有媒体查询：

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

当我在谷歌浏览器中打开元素检查器并选择设备 iPhone 4 时，它显示与原始iPhone 4s屏幕和其他一些电话屏幕不同。为什么？我做错了什么？

如何在Google Chrome或其他浏览器中查看iPhone 4的原始外观？有没有解决方案？

它在iPhone 4上的外观如何： How it shows in iPhone 4

当我选择设备iPhone 4（左上角）时，它在Google Chrome中的显示方式： how it shows in Google Chrome, when I select device: iPhone 4 (on the top left)

Answer 1

而不是

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

仅使用

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

为什么？

宽度媒体功能描述了渲染表面的宽度输出设备（例如文档窗口的宽度，或者打印机上页面框的宽度。）

确定输出设备是网格设备还是位图设备。如果设备是基于网格的（例如TTY终端或手机只显示一种字体），值为1.否则为零。

Answer 2

我通过向<meta>

添加<head>视口标记来解决我的问题

<meta name="viewport" content="width=device-width,initial-scale=1">

现在我不必使用(max-device-width: 480px) and (min-device-width: 320px)

(max-width: 480px) and (min-width: 320px)＆lt; - 适用于所有设备

无论如何，谢谢大家的回复。