网页不能缩放到视口宽度
网页不能缩放到视口宽度
提问于 2019-04-24 04:00:38
我正在尝试将一个旧网页转换为响应式网页设计。
最小宽度为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像素)，但它却“溢出”(见屏幕截图，“标题”应居中)：
我以为设置viewport-meta就能解决这样的问题？！
当然，我可以在屏幕上点击来缩放/适应网页，但默认情况下，它应该这样做。
我做错了什么？
谢谢!
回答 1
Stack Overflow用户
发布于 2019-04-24 04:57:59
来自：https://www.w3schools.com/css/css_rwd_viewport.asp
width=device-width部件将页面宽度设置为跟随设备的屏幕宽度(根据设备的不同而有所不同)。
这意味着设备将确定宽度，在大多数移动设备上通常为320px到360px。尽管发布的规格在许多手机上是1080px宽或更宽，但它们会调整设备像素，因此不会提供桌面版本。你的例子是将480px宽的内容放到你的320px宽的设备上，所以告诉你的设备要有480px宽，如下所示：
<meta name="viewport" content="width=480, initial-scale=1.0">我在评论中也提到了arieljuod提供的width: 100%; min-width: 480px; instead of width: 480px;的用法。他说的是max-width，但我认为我们应该使用min-width，因为你不希望你的内容小于480px。最后，检查页边距等，以及框的大小。这将对响应式网格布局产生巨大影响。查看CSS规范化以获取更多信息：https://css-tricks.com/reboot-resets-reasoning/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55818582
复制相关文章
相似问题
腾讯云开发者
