我的网站在某些移动设备上没有响应

Question

我有 my website 并且我一直在使用 bootstrap、粉底和 w3.css 的混合物使其响应。为了测试它在小屏幕上的工作情况，我一直在调整笔记本电脑上浏览器的大小 window 以模仿移动设备。它运行良好，我现在已经发布了我的网站。但是，我已经在我的 iPod touch 5（模仿苹果设备）上对其进行了测试，但它没有显示响应版本。我也在我的 android phone 上试过了，但它没有响应。不过，我已经在 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 一起使用，所有标准版本。希望能帮到你。

Answer 1

您始终可以在浏览器中使用不同的设备对其进行测试。查看 google chrome 的波纹扩展。这是非常有用的扩展。

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

Answer 2

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

我的网站在某些移动设备上没有响应

My website is not being responsive on some mobile devices

css

twitter-bootstrap

zurb-foundation