设备屏幕@media 查询
Device screens @media queries
我在 CSS 中有媒体查询：
@media only screen and (max-device-width: 480px) and (min-device-width: 320px)
当我在 Google Chrome 和 select 设备中打开 elements inspector 时 iPhone 4，它显示与原来的 iPhone 4s 屏幕和其他一些 phone 屏幕不同.. 为什么？我做错了什么？
如何在 Google Chrome 或其他浏览器中查看 iPhone 4 页面的原始外观？有什么解决办法吗？
它在 iPhone 4 上的样子：
当我 select 设备 iPhone 4（左上角）时，它在 Google Chrome 中的显示方式：
而不是
(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.
我通过向 <head>
添加 <meta> 视口标签解决了我的问题
<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) <- 适用于所有设备
无论如何，谢谢大家的回复。
我在 CSS 中有媒体查询：
@media only screen and (max-device-width: 480px) and (min-device-width: 320px)
当我在 Google Chrome 和 select 设备中打开 elements inspector 时 iPhone 4，它显示与原来的 iPhone 4s 屏幕和其他一些 phone 屏幕不同.. 为什么？我做错了什么？
如何在 Google Chrome 或其他浏览器中查看 iPhone 4 页面的原始外观？有什么解决办法吗？
它在 iPhone 4 上的样子：
当我 select 设备 iPhone 4（左上角）时，它在 Google Chrome 中的显示方式：
而不是
(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.
我通过向 <head>
<meta> 视口标签解决了我的问题
<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) <- 适用于所有设备
无论如何，谢谢大家的回复。