智能手机上的媒体查询-网站视图
media query-website view on smartphone
我已经尝试了 min-width , max-width 和 min-device-width , max-device-width，但其中 none 在 smartphone（在 iPhone 上测试）作为 expected.Smartphone 当任何一个是 used.I 时视图保持不变只是在我的 phone 上获得与笔记本电脑（我的笔记本电脑 1224px）相同的视图但是较小的 size.Images 会澄清我的观点。
这是我在笔记本电脑上得到的（浏览器最大化），当使用 min-width(1224px) 时
查看 1
当我在笔记本电脑上使用 min-width(320px) and max-width(480px) 并缩小浏览器时，我得到了这个
查看 2
这是我在 smartphone.But 上的预期结果 我在 smartphone 上看不到这个视图，即使在使用 min-device-width(320px) and max-device-width(480px) 之后也是如此。width 和 [=16] =] 给我 view 1 iPhone 较小的视图（较小的图像和很小的字体）
如何解决这个问题。
非常感谢您的帮助。
因为您说您的 head 中没有 viewport 元标记，所以您在移动设备上的缩放比例不会一致。在您的 html 的 <head> 中，添加以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1">
来源：Using the viewport meta tag to control layout on mobile browsers
我已经尝试了 min-width , max-width 和 min-device-width , max-device-width，但其中 none 在 smartphone（在 iPhone 上测试）作为 expected.Smartphone 当任何一个是 used.I 时视图保持不变只是在我的 phone 上获得与笔记本电脑（我的笔记本电脑 1224px）相同的视图但是较小的 size.Images 会澄清我的观点。
这是我在笔记本电脑上得到的（浏览器最大化），当使用 min-width(1224px) 时
查看 1
当我在笔记本电脑上使用 min-width(320px) and max-width(480px) 并缩小浏览器时，我得到了这个
查看 2
这是我在 smartphone.But 上的预期结果 我在 smartphone 上看不到这个视图，即使在使用 min-device-width(320px) and max-device-width(480px) 之后也是如此。width 和 [=16] =] 给我 view 1 iPhone 较小的视图（较小的图像和很小的字体）
如何解决这个问题。
非常感谢您的帮助。
因为您说您的 head 中没有 viewport 元标记，所以您在移动设备上的缩放比例不会一致。在您的 html 的 <head> 中，添加以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1">
来源：Using the viewport meta tag to control layout on mobile browsers