Question

我已经尝试了min-width , max-width和min-device-width , max-device-width，但没有一个按照预期使用智能手机（在iPhone上测试过）。当使用任何一个时，智能手机视图保持不变。我只是得到相同的视图作为笔记本电脑（我的笔记本电脑1224px）在我的手机上，但尺寸较小。图像会澄清我的观点。

这是我在使用min-width(1224px)时使用笔记本电脑（浏览器最大化）

查看1

enter image description here

当我使用min-width(320px) and max-width(480px)并缩小笔记本电脑上的浏览器时，我得到了这个

查看2

enter image description here

这是我在智能手机上的预期结果。但即使使用min-device-width(320px) and max-device-width(480px)，我也无法在智能手机上获得此视图。width和device-width都会给我{{1在iPhone上使用较小的视图（较小的图像和小字体）

如何摆脱这个问题。

非常感谢您的帮助。

Answer 1

由于您说viewport中没有head元标记，因此您无法在移动设备中进行一致缩放。在您的html的<head>中，添加以下内容：

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

来源：Using the viewport meta tag to control layout on mobile browsers

智能手机上的媒体查询 - 网站视图

1 个答案: