twitter-bootstrap Bootstrap 不适用于移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36813919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap is not working on mobile
提问by nethken
i tried to run my design to the developer tools on chrome as a mobile but the bootstrap is not working. Can someone give me ideas why the bootstrap is not working on mobile?
我尝试将我的设计运行到 chrome 上的开发人员工具作为移动设备，但引导程序不起作用。有人可以告诉我为什么引导程序不能在移动设备上运行的想法吗？
here is the picture when i tried to run on mobile.
这是我尝试在移动设备上运行时的图片。
and this when i run on desktop it worked i don't know why not on mobile.
当我在台式机上运行时，它可以工作，我不知道为什么不能在移动设备上运行。
here is my media queries.
这是我的媒体查询。
@media (max-width: 768px) {
.img-responsive{
width: 300px;
height:50px;
padding-left:50px;
}
}
@media (max-width: 376px) {
.img-responsive{
width: 220px;
height:50px;
padding-left: 20px;
}
}
@media (max-width: 286px) {
.img-responsive{
width: 180px;
height:50px;
padding-left: 5px;
}
.footer{
height: auto;
}
h4{
padding-top: 50px;
padding-left: 20px;
}
}
回答by Pbk1303
You are probably missing the viewport meta tagin the html head:
您可能缺少html 头中的视口元标记：
Viewport is the user's visible area of a web page. Using width=device-widthyou need to set the width to device width you are viewing in like mobile or tablet or desktop.
视口是网页的用户可见区域。使用width=device-width您需要将宽度设置为您正在查看的设备宽度，例如手机、平板电脑或台式机。
<meta name="viewport" content="width=device-width, initial-scale=1">
Refer this link :Viewport meta tag
请参阅此链接：视口元标记
