Question

我有my website而且我一直在使用bootstrap，foundation和w3.css的混合响应。为了测试它是否适用于小屏幕，我一直在调整笔记本电脑上的浏览器窗口大小以模仿移动设备。它工作得很好，我现在已经发布了我的网站。但是，我来测试我的iPod touch 5（模仿和苹果设备），并没有显示响应版本。我也在我的Android手机上试过它，而且没有响应。不过，我已经在Windows手机上试过了，它运行正常。我一直没有依赖于技术来检测您所使用的设备，仅限于屏幕宽度。我认为这个问题可能与屏幕分辨率有关。以下是控制我网站的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以及所有标准版本一起使用。我希望你能提供帮助。

Answer 1

你需要在头<meta name="viewport" content="width=device-width, initial-scale=1.0">中有这个。 Chrome还具有可以模拟不同设备的设备模式

Answer 2

您可以随时在浏览器中使用其他设备对其进行测试。查看谷歌浏览器的涟漪扩展。它确实是有用的延伸。

https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

我的网站没有对某些移动设备做出响应

2 个答案: