网页不会缩放到视口宽度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (20)

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

最小宽度为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”应居中):

我以为设置viewport-meta会解决这些问题吗?!

当然我可以点击屏幕来缩放/适应网页真的到我的设备宽度,但它应该默认情况下这样做。

我错了什么?

谢谢!

提问于
用户回答回答于

来自:https//www.w3schools.com/css/css_rwd_viewport.asp

width=device-width部件将页面宽度设置为遵循设备的屏幕宽度(具体取决于设备)。

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

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

我还第二次使用width: 100%; min-width: 480px; instead of width: 480px;。他说最大宽度,但我认为更合适我们会使用最小宽度,因为你不希望你的内容小于480px。最后检查边距等,以及盒子大小。这将对响应式网格布局产生巨大影响。查找CSS规范化以获取更多信息:https//css-tricks.com/reboot-resets-reasoning/

扫码关注云+社区

领取腾讯云代金券