我的页面上有一个 .body 元素 http://crimeansurfers.tumblr.com它有一个应该触及屏幕边缘的边框。
body {
font-family: 'Arquitecta', sans-serif;
font-size: 13px;
color: ;
border: #00f 10px solid;
background: url(https://secure.static.tumblr.com/nu04jpk/IgAniz800/grid_lyfe_background.gif) #fff;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
它在桌面上显示正常(框架触及屏幕边缘,但是,当我在移动设备上打开它时,它显示如下:
如您所见,右侧框架没有接触到屏幕边缘,但它应该接触到。
我也在使用 viewport
使用以下参数调整移动设备的显示大小:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
我需要更改什么才能使其按预期工作?
谢谢!
UPD 也许使用其他方法渲染帧比 body
更有意义CSS 标签?
最佳答案
#thumbs
div 中的 ul
元素导致溢出。
您可以通过在样式表底部添加媒体查询来解决此问题。
<style>
@media (max-width: 414px) {
#thumbs ul {
padding-left: 0;
}
}
</style>
在这种情况下,我将媒体查询的最大宽度设置为 414px,因为问题只出现在小于 iPhone 6+ 的屏幕尺寸上。
关于html - 如何将视口(viewport)扩展到全屏宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41133763/