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;
}
}

MobileMedia查询宽度问题

1 个答案: