我有my website我一直在通过混合使用 Bootstrap 、基础和 w3.css 来使其响应。为了测试它在小屏幕上的工作情况,我一直在调整笔记本电脑上浏览器窗口的大小以模仿移动设备。它运行良好,我现在已经发布了我的网站。但是,我已经在我的 iPod touch 5(模仿苹果设备)上对其进行了测试,但它没有显示响应版本。我也在我的安卓手机上试过,它没有响应。不过,我已经在 Windows Phone 上试过了,它运行良好。我一直没有依赖检测你使用的是哪个设备的技术,只依赖于屏幕宽度。我认为这个问题可能与屏幕分辨率有关。这是控制我的网站的 CSS:
@media (max-width: 767px)
{
.navbar-default .navbar-nav .open .dropdown-menu > li > a
{
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus
{
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
}
@media (min-width: 767px)
{
body
{
padding-top: 230px;
}
ul.nav li.dropdown:hover ul.dropdown-menu
{
display: block;
}
}
@media (max-width: 767px)
{
body
{
padding-top: 130px;
}
}
@media (min-width: 768px)
{
#resize
{
width: 30%;
}
}
@media (min-width: 768px)
{
#alignp
{
text-align: center;
}
}
正如我所说,我已经将它与 bootstrap、foundation 和 w3.css 一起使用,它们都是标准版本。我希望你能帮上忙。
最佳答案
你需要把这个放在头上 <meta name="viewport" content="width=device-width, initial-scale=1.0">
.
Chrome 还有一种设备模式,您可以在其中模拟不同的设备
关于twitter-bootstrap - 我的网站在某些移动设备上没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35501111/