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

标签 twitter-bootstrap css zurb-foundation

我有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/

相关文章:

html - Hero Image 文本覆盖在浏览器调整大小时四处移动

javascript - Foundation 5 和 contenteditable(移动)不工作

css - 如何在 bootstrap 2.3.2 中对齐文本区域中的文本

css - 为什么我的填充会在 bootstrap 3 导航栏崩溃时执行此操作?

jquery - Conceal 的 facebook 像按钮不显示 jquery

html - 在 CSS 掩码后面添加图像

css - 在 Foundation 3 元素上使用 Zurb Foundation 4

css - 在没有 JS 的情况下滚动页面时应用媒体查询

javascript - 如何在 ngFor 循环 [Angular] 中制作可扩展的表格行?

html - 如何使按钮在 div 中垂直居中