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

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 元素导致溢出。您可以通过在样式底部添加媒体查询来解决此问题 sheet.

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

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

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

How to extend viewport to the full screen width?

html

css

viewport