我使用html和css制作了一个页头、页面内容和页脚宽度为1170px的页面(就像boostrap一样),加起来为width+border+padding。
同时,我还使用了meta viewport标签。对于这个问题,我将其保留在下面。期望内容(页头、内容和页脚)可以适应移动设备上的viewport(img 1),但在某些设备上只显示部分内容,并给出了一个水平滚动条(img 2)。
我已经搜索了很多关于viewport的资料,但无法找到如何让所有设备都看起来像图片1的解决方案。请给予建议。
您可以查看ViewPort Test中的实时代码。我不会更改它。测试我将使用以下开发工具 VIEWPORT
同时,我还使用了meta viewport标签。对于这个问题,我将其保留在下面。期望内容(页头、内容和页脚)可以适应移动设备上的viewport(img 1),但在某些设备上只显示部分内容,并给出了一个水平滚动条(img 2)。
我已经搜索了很多关于viewport的资料,但无法找到如何让所有设备都看起来像图片1的解决方案。请给予建议。
您可以查看ViewPort Test中的实时代码。我不会更改它。测试我将使用以下开发工具 VIEWPORT
<meta name=viewport content="width=device-width, initial-scale=1">
CSS
*{
margin:0;
padding:0;
border:0;
}
div.header,
div.content,
div.footer{
width:100%;
}
div.header{
background:blue;
}
div.content{
background:orange;
}
div.footer{
background:purple;
}
div.wrapper{
width:1120px;
border:10px solid green;
padding:0 15px 0 15px;
margin:0 auto;
background:red;
}
HTML
<div class="header">
<div class="wrapper">
<h1>Header</div>
</div>
</div>
<div class="content">
<div class="wrapper">
<h1>Content</h1>
</div>
</div>
<div class="footer">
<div class="wrapper">
<h1>Footer</h1>
</div>
</div>
max-width
而不是width
来获得更大的灵活性:max-width:1120px
。工作示例。 - showdev