html - MobileMedia 查询宽度问题

Question

我有一个网站，我正在制作响应以适应任何屏幕尺寸。问题是在较小的 (320px) 屏幕上，我页面的最右侧出现了一些“空白区域”，我可以在 iPhone 5 和 BBz10 上重现此问题。任何帮助深表感谢!在我的 HTML 中我声明了

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

在我的 CSS 文件中....

html{
    font-size:62.5%;
    margin:0;
}

body{
    margin:0;
    width:100%;
    font-family:'Arial', sans-serif;
    font-size:1.4rem;
    font-size:14px;
    background-color:#F0F1EC;
    color:#545452;
}
#header{
    background-color:red;
    height:25px;
}


@media screen and (min-width : 320px) and (max-width : 555px) {

  //there is no code related to widths of any element in this media query
}

Answer 1

如果是多余的空白导致右侧滑动，可以尝试添加如下媒体查询..

@media screen and (max-width:320px) {
body, html{
max-width:320px;
overflow-x:hidden;
}
}