Question

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

任何想法如何解决这个问题？

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

我在header.php（head）

使用了viewport

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

@media code：

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的内联样式。一旦你删除你的网站是好的。它是＆＃34;＃footer＆＃34;。

中的最后一个元素

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

响应式设计，视口问题

1 个答案: