Question

我正在尝试将旧网页转换为自适应网页设计。

最小宽度为480像素，稍后将添加带有断点的桌面版本。

到目前为止的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{width:480px;margin:auto}

#wrapper{width:480px}
#header{width:480px;height:100px;text-align:center;background:black;color:white}
#content{width:480px;background:#cfcfcf;height:1000px}
</style>

</head>
<body>

<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>

</body></html>

我希望该网页可以缩小到我的移动设备宽度（320像素），但会“溢出”（请参见屏幕截图，“ HEADER”应居中）：

我认为设置视口元可以解决这些问题？！

我当然可以在屏幕上轻按以将页面缩放/调整到真正适合我设备的宽度，但是默认情况下应该这样做。

我怎么了？

谢谢！

Answer 1

发件人：https://www.w3schools.com/css/css_rwd_viewport.asp

width=device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

这意味着设备将确定宽度，在大多数移动设备上通常为320像素到360像素。即使在许多手机上发布的规格宽度为1080px或更宽，它们也会缩放设备像素，因此它们不提供桌面版本。您的示例将480px宽的内容放置在320px宽的设备上，因此使用以下命令告诉您的设备为480px宽：

<meta name="viewport" content="width=480, initial-scale=1.0">

我还在评论中第二次使用了arieljuod提供的width: 100%; min-width: 480px; instead of width: 480px;。他说最大宽度，但我认为更合适的做法是使用最小宽度，因为您不希望内容小于480px。最后检查边距等，然后进行大小调整。这将对响应式网格布局产生重大影响。查找CSS规范化以获取更多信息：https://css-tricks.com/reboot-resets-reasoning/

网页无法缩放到视口宽度

1 个答案: