问题描述
我正在使用Bootstrap设计网站( danielrojas.net ),并为XS视口创建了单独的布局.当我调整桌面浏览器(Chrome)的大小以及在Responsinator.com或类似网站上尝试使用它时,它可以很好地工作.
I am designing my site (danielrojas.net) with Bootstrap and have created a separate layout for the XS viewports. It works beautifully when I resize my desktop browser (Chrome) and when I try it on Responsinator.com or similar.
但是,在我实际的Android手机和平板电脑上(无论是使用Chrome还是使用内置浏览器进行测试),无论如何都显示标准版本.我已经包含了魔术视口META标签:
However, on my actual Android phone and tablet (both using Chrome, tested using the built-in browser as well), the standard version is shown, no matter what. I have included the magic viewport META tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
无济于事.我使用的是自定义的Bootstrap CSS,但即使加载了官方的CSS,仍然存在相同的错误.
To no avail. I am using a customized Bootstrap CSS, but even loading the official one, the same error remains.
其他站点(例如getbootstrap.com)在这两种设备上均可正常运行.我想念什么?
Other sites (e.g. getbootstrap.com) work fine on both devices. What am I missing?
提前谢谢!
推荐答案
您正确地添加了<meta>
标记.但这是在框架中.
You are right that you have included <meta>
tag. But it is in the frame.
通过检查您的代码,它不在主<head>
中.因此,也将其包括在该部分中.
By inspecting your code, Its not there in the main <head>
. So Include it in that part also.
<meta name="viewport" content="width=device-width, initial-scale=1">
我也不确定,响应是否可以在iframe上使用,如果它无法使用,则应避免使用iframe.
I'm also not sure, responsive will work on iframe, You should avoid using iframe if its not working.
这篇关于Bootstrap XS版本不适用于手机和平板电脑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!