Question

当您访问手机上的网页（我正在使用Android）时，如果它是常规网页，则会将其缩小以适合您的手机屏幕。

我一直认为制作移动页面的方法是让页面小到足以完全适合手机的屏幕分辨率而不会缩小。

但这并没有发生。我甚至专门将我的页面大小设置为body{ width: 300px;}，但当我将其加载到手机中时，它在左上角缩小，周围有足够的可用空间。

我做错了什么？

Answer 1

您需要使用视口元标记

<!doctype html>
<html>
<head>
    <title>Hello world!</title>

    <meta name="viewport" content="width=device-width"/>
</head>

<body>

<p>Hello world!</p>

</body>
</html>

请在此处详细阅读http://davidbcalhoun.com/2010/viewport-metatag

Answer 2

这是因为正文的宽度与浏览设备有关。

大多数现代手机模拟桌面浏览器，因此相对于整个浏览器窗口，300px的宽度为300px。基本上，您将在桌面浏览器中看到与在手机浏览器中相同的内容。

理想情况下，要做的是显示与移动用户略有不同的内容。通常是具有较大菜单项的页面的缩减版本，并隐藏了大部分不必要的常用内容。（花哨的标题等）。

如何让移动网页不缩水？

2 个答案: