1

更新 我解决了我自己的问题。见下文。


我用引导程序和其他@media 查询创建了一个网站来设置网站的样式。在桌面上,当我调整浏览器大小时,它会显示移动布局,但在我的手机上,它仍然会加载全宽网站。我在 Nexus S 上使用 Chrome。

http://conversing.ca

我看过有类似问题的帖子。检查了 HTML 中的视口元标记、手持媒体标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen,handheld" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" media="screen,handheld" href="style.css" />

CSS (样式.css)

我添加了从另一篇文章中看到的#wrapper 行,但这也不起作用。希望有一种方法可以在移动设备上查看开发工具。

@media handheld, screen and (max-width: 767px){

#wrapper{width: 767px;}

body {
padding-right: 0px;
padding-left: 0px;
}

.hero-unit {
margin-top:0px;
padding-left: 12%;
}

.iphone {
top: auto;
left: 0;
position: relative;
}

input,button{
width: 90%;
margin: 0 auto;
}

#footer {
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}
4

2 回答 2

1

我解决了我自己的问题。错误是带有“noresize”标签的域屏蔽中的 iframe。我无法为此编辑 HTML,因此我禁用了该功能,现在您应该可以在手机上看到移动布局。

于 2012-11-05T22:28:39.167 回答
0

我最初的“猜测”是删除“手持设备”。“手持”查询并没有得到很好的支持。

于 2012-11-05T18:40:07.040 回答