Question

我是新的网站设计，发现很难解决问题。

我开始使用iphone 4屏幕尺寸并使用以下媒体查询：

@media screen and (max-device-width: 320px) and (orientation: portrait)

并在标题部分使用了以下视口

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

虽然我将body和html宽度设置为320px和overflow-x: hidden; 它仍然显示右侧的白色空白区域，导致水平滚动显示。

@media screen and (max-device-width: 320px) and (orientation: portrait){

    body, html{width:320px; overflow-x: hidden;}
    .navlogo{position: absolute; left: 2px; top: 0;}
    #globalheader{width:320px !important; margin:0; padding:0; margin-right:0;}
    #globalheader .wrap{width:320px;}
    #globalnavholder{left:28px;} 
    #globalheader .navlogo{float:left;}
    #globalheader .wrap{width:320px;}
    #globalnav li{display:block; float:none; width:100%; }
    .home-body-main{ width:360px; overflow:hidden; margin: 0 auto; }

    .canvas-home{ width:320px; overflow-x:hidden; height:150px; display:none;} 

    .after-canvas-panel{width:320px !important; margin: 0 auto; margin-left:0; display: block; padding-bottom:100px;}
    .home-body-paragraph{width:320px; margin: 0 auto; margin-left:0;}
    #footer .wrap{width:320px;}
}

Answer 1

尝试将此添加到您的css：@viewport { width:device-width;}

Answer 2

响应的主要目标之一是远离＆＃34;固定宽度＆＃34;，特别是如果它们等于或接近设备宽度。所以我会改变所有有

的东西

{ width: 320px; }

类似

{ width: 100%; }

您可能需要在较大的媒体查询或基本CSS上使用最大宽度。根据您的需要，您可能需要大约960px或1000px的大屏幕。如果您使用100％的宽度（尤其是小屏幕），请确保您没有填充...这让我有几次。

响应式网页设计 - 无法删除空白区域和水平滚动条

2 个答案: