iphone - 如何删除仅出现在iphone浏览器中的小空间

Question

我使用百分比来定义所有元素的宽度。我还隐藏（display: none;）一些仅适用于手持设备的元素，包括 iphone。

html结构：

<header>
    <!-- ... -->
</header>
<nav>
    <!-- ... -->
</nav>
<div id="search">
    <!-- ... -->
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

/* ... */
header {
    width: 100%;
    height: 80px;
    /* ... */
}

/* ... */
nav {
    float: left;
    width: 76%;
    height: 20px;
    padding: 5px 2%;
}

#search {
    float: right;
    width: 16%;
    height: 20px;
    padding: 5px 2%;
}

@media only screen and (max-device-width: 480px), handheld {
    /* ... */
    header {
        height: 50px;
    }
    nav {
        width: 96%; /*plus padding 2% each = 100%*/
    }

    #search {
        display: none;
    }
}

所以，我隐藏search并增加nav填充空间（100％）。但是，右侧有一个小的空白区域。

屏幕视图：

iphone视图：

有谁知道如何删除iphone视图中的小空白？
完整代码：http: //jsfiddle.net/AWGk2/

Answer 1

从您的 NAV 和 SEARCH 元素中删除填充。

将 NAV 元素的宽度设为 80%，将 SEARCH 元素的宽度设为 20%。

在 NAV 和 SEARCH 元素中添加一个新的 DIV 元素，并将填充应用于这些元素。不要费心在这些新的内部元素上指定宽度。

在您的媒体查询部分中，将 NAV 宽度设为 100%。

我还会考虑添加到您的视口规则中。

这是我自己使用的一个：

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