css - 响应式设计，视口(viewport)问题

Question

我的网站响应式设计有问题。问题是，当页面加载时，我可以看到“移动外观”，但它缩小了。我认为我的页面有一些元素将宽度设置为某个大数字是一个问题。因此，我在屏幕右侧有一个水平 slider 和一个大的空白区域。

有什么解决办法吗？

网站位于 http://www.studentskizivot.com/

我在 header.php (head) 中使用了视口(viewport)

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

@媒体代码:

html{
background:none!important;
width:100%;
}
#text-51, #text-79, #polls-widget-7 {
display:none;
}
#bglink{
display:none;
}
body {
background:none!Important;
margin:0px auto;
}
#footercontent .footerboxlast{
margin-top:15px;
}
#footercontent .footerbox {
width: 209px;
display: block;
clear: both;
float: left;
margin: 15px 16px 0px 0px;
border: #FF0000 solid 0;
padding: 0;
background: url(images/skin1/footer_bgrdbox.png);
font-family: "Open Sans";}
nav#primary-navigation{margin-top:15px;}
#header-widget-area{display:none;}
#topbar{padding: 0.4em 0.8em;}
#secondary-navigation select.tinynav{
font-size:1.4rem;}
div#main div#content div#wdsi-slide_in.wdsi-slide div.wdsi-slide-wrap{
display:none!important;
}
.logo-image-enabled #site-title {
line-height: 1.5;
width: 100%;
}
#topbar{width:100%!important;}
.logo-image-enabled #site-title { line-height: 1.5; width: 100%; }
.logo-image-enabled #branding{padding:0px;}
.topbar-enabled #header{background:#EEEEEE;}
#topbar{line-height:14px}
#topbar{padding: 0.4em 0.8em;}

}

此外，当我在 firefox for android 中打开页面时，许多 css 规则不适用。 Opera、Chrome、Maxton 都运行良好，但 firefox 很乱。有什么线索吗？

很多很多，谢谢!

Answer 1

在您的源代码中，有一个元素具有宽度为 1041px 的内联样式。一旦你删除你的网站是好的。它是“#footer”中的最后一个元素。

<div style="height:8px; width:1041px; background:#fff; position: relative; float:left;"></div>