Iphone 网站水平溢出 20px答案

【问题标题】：Iphone website overflowing by 20px horizontallyIphone 网站水平溢出 20px
【发布时间】：2014-05-28 13:51:36
【问题描述】：

我正在制作一个响应式网站。这是一个经过修改的主题的 wordpress 网站。

主题有 5 个样式表：max-479 px, max-767px,min-768px,min1024px

我已经在 ipad 和 Nexus One(Android) 上测试了该网站。而且效果很好！

但是，当我在 iphone 4S 上对其进行测试时，它会在移动 safari 和 google chrome 上导致 css 错误。 css 错误是，在查看网站时，即使我使用了以下 css，用户仍然可以横向滑动：

html
{
    width:100%;
padding:0;
margin:0;
    position:relative;
    overflow-x:hidden!important;
}
body
{
padding:0;
margin:0;
    max-width:100%;
    position:relative;
    overflow-x:hidden!important;
}

我在 header.php 中插入了这个元标记

    <meta name="viewport" content="width=device-width,maximum-scale=1.0">

我检查了内容中的 div 是否以任何方式溢出。但他们不是。我完全不知道要做什么，所以当用户水平滑动时它不会改变。

网站链接：http://specialrequesthorns.com/

感谢您的帮助。

-- 编辑

感谢@ChrisHerbert 和@mrbubbles 解决了这个问题。似乎侧边栏有一个宽度为 120% 的 ul，将其设置为 100% 解决了问题！

问候，

门诺·范·穆尔维克

【问题讨论】：

嗨，门诺。我认为获得帮助的最简单方法是链接到实时版本以了解全局。
从右上角删除两个图标时是否遇到同样的问题？我很确定图标上的 padding-right 正在做某事。
@mrbubbles 我检查了右上角的图标并做了 display:none 来测试它。这并不能解决问题。
#omc-sidebar 元素导致了宽度问题。如果你删除它，页面不会溢出。
在@Chris Herbert 的回复中，.pis-ul 上 120% 和 110% 的宽度给你带来了问题。

标签： ios css iphone wordpress responsive-design

【解决方案1】：

只是猜测 - 您是否尝试过使用完整的元数据？

<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

【讨论】：

我尝试在 header.php 中使用该元数据。没有区别