如何将视口扩展到全屏宽度？

Question

我的页面http://crimeansurfers.tumblr.com上有一个.body元素，它有一个应该触及屏幕边缘的边框。

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

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

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

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