Bootstrap在移动设备上不起作用 [英] Bootstrap is not working on mobile
问题描述
我尝试将我的设计运行到chrome上作为移动设备的开发人员工具上,但是引导程序不起作用.有人可以告诉我为什么引导程序无法在移动设备上运行吗?
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?
这是我尝试在移动设备上运行时的图片.
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.
这是我的媒体查询.
@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;
}
}
推荐答案
您可能在html头中缺少 viewport元标记:
You are probably missing the viewport meta tag in the html head:
视口是用户在网页上的可见区域.您需要使用 width = device-width
将宽度设置为要在移动设备,平板电脑或台式机中查看的设备宽度.
Viewport is the user's visible area of a web page. Using width=device-width
you need to set the width to device width you are viewing in like mobile or tablet or desktop.
<meta name="viewport" content="width=device-width, initial-scale=1">
Refer this link : Viewport meta tag
What is Viewport?.
这篇关于Bootstrap在移动设备上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!