html - 如何将视口(viewport)扩展到全屏宽度？

Question

我的页面上有一个 .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 标签？

Answer 1

#thumbs div 中的 ul 元素导致溢出。您可以通过在样式表底部添加媒体查询来解决此问题。

<style>
@media (max-width: 414px) {
  #thumbs ul {
    padding-left: 0;
  }
}
</style>

在这种情况下，我将媒体查询的最大宽度设置为 414px，因为问题只出现在小于 iPhone 6+ 的屏幕尺寸上。