在浏览器窗口大小调整@media工作，但不能在手机

解决：汤姆：你是如此的权利。不幸的是WordPress的函数wp_head（）因为插件而增加了width = 1100。谢谢！在浏览器窗口大小调整@media工作，但不能在手机

我工作的一个新的自适应网站，但似乎无法得到@media查询工作。它可以在桌面上调整浏览器窗口的大小时起作用，但它不适用于我的iPad，iPhone或Android手机。

我在做什么错？

下面的链接：http://demo.mindspins.com/atmnieuw/ 这里的链接到CSS：http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php

提前感谢！

根据要求，CSS代码：

@media all and (max-width: 1460px) { 
    .site-width{ width: 1199px; } 
    .main-width{ width: 719px; } 
} 
@media all and (max-width: 1220px) { 
    .site-width{ width: 959px; } 
    .main-width{ width: 479px; } 
    #page-title h1.thetitle{ 
     font-size: 20px; 
     line-height: 24px; 
    } 
    .sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{ 
     font-size: 20px; 
     line-height: 24px; 
    } 
} 
@media all and (max-width: 980px) { 
    .site-width{ width: 719px; } 
    .main-width{ width: 479px; } 
    .right-width{ display: none; } 
    #header-right{ display: none; } 
    .widgets-wrapper-1{ display: block; } 
    .widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; } 
} 
@media all and (max-width: 740px) { 
    .site-width{ width: 95%; margin: 0 auto;} 
    #header-wrapper{ width: 100%; } 
    #header-left{ display: none; } 
    #header-mid{ height: 80px; } 
    #atmlogo a.atm { 
     z-index: 100; 
     top: 24px; 
     left: 0; 
    } 
    .main-width{ width: 100%; } 
    .left-width{ width: 100%; } 
    .sidebar-left{ display: none; } 
    .site-bg{ display: none; } 
    #header-left span.header-contact{ height: 80px; width: 100%;} 
    #main-nav{ height:auto !important; } 
    #mobile-nav{ 
     margin: -4px 0 1px 0; 
     display: block; 
     position: relative; 
     width: 100%; 
    } 
    #mobile-nav .nav-wrapper{ 
     display: block; 
     color: #fff; 
     background: #cc0033; 
     margin: 1px 0; 
     height: 40px; 
     padding: 0 10px; 
    } 
    #mobile-nav .nav-wrapper select.atm-dropdown{ 
     font-size: 12px; 
     display: block; 
     height: 40px; 
     width: 100%; 
     color: #fff; 
     background: #cc0033; 
     border: 0; 
     clear: both; 
     -webkit-border-radius: 0; 
     -webkit-appearance: none; 
    } 
    #mobile-nav .theme-s{ 
     width: 100%; 
     background: #cc0033; 
     color: #fff; 
    } 

    #mobile-nav input.s{ 
     background: #cc0033; 
     color: #fff; 
    } 

    #mobile-nav input.searchsubmit{ 
     border-left: solid 1px #dcdcdc; 
     color: #fff; 
     background: #cc0033; 
     background-image: url(../images/icon_search.png); 
     background-repeat: no-repeat; 
     background-position: right top; 
     -webkit-border-radius: 0; 
     -webkit-appearance: none; 
    } 

    #primary{ display: none; } 
    #main-content-header{ 
     height:auto !important; 
     margin: 0 0 1px 0; 
    } 
    #main-content-header span.header-image{ 
     display: block; 
     float: left; 
     width: 25%; 
     height:auto !important; 
     margin: 0; 
    } 
    #main-content-header span.header-image img{ 
     line-height: 0px; 
     margin: 0; 
     padding: 0; 
    } 

    #page-title{ 
     height: 79px; 
    } 
} 
@media all and (max-width: 500px) { 
    body { 
     font-size: 12px; 
     line-height: 20px; 
    } 
     #footer-nav{ display: none; } 
     #copyrights{ display: none; } 
     .entry-content-bg{ padding: 20px; } 
     #page-title .title-wrapper{ padding: 0 20px } 
     #page-title h1.thetitle{ 
     font-size: 16px; 
     line-height: 20px; 
    } 
}

来源

2012-10-09 mindspins

请在你的问题相关的代码片段，而不是链接到“整个交易”。 – Willem

只是要注意，它适用于我的Nexus 7，即使正确调整从纵向更改为风景。 –

它似乎不适用于iPhone，iPad和三星Galaxy1,2？ – mindspins

再次查看，当使用我的iPhone 4S和iOS 6中引入的远程Web检查器时，即使它们位于CSS文件中，我也找不到任何低于max-width: 1200px的任何样式。我不知道这是为什么。

而且，我写了一篇博客文章回应式设计和媒体查询了几个月，你可以read it here如果你想。不说你不擅长媒体查询（这是一个非常好的网站！）只是希望它会是一个有趣的阅读你:)

编辑：只是再次看你的网站，我注意到在head（右在底部）你有这样的代码：

meta name="viewport" content="width=1100"

这可能或是为什么样式没有任何东西在下面的1100px屏幕宽度采用1200像素。把它拿出来再试一次。

来源

2012-10-09 15:51:04

我没有看到另一个视口条目...即使对源代码的搜索只返回第一个标签。你可能会复制代码和它的环境并发布它？ – mindspins

你是那么对。不幸的是WordPress的函数wp_head（）因为插件而增加了width = 1100。 – mindspins

你可以在头标记使用此代码：

<meta name="viewport" content="width=device-width, initial-scale=1"/>

来源

2012-10-09 14:07:52

<！ - 移动视口优化：j.mp/bplateviewport - > 这就是头脑！谢谢反正... – mindspins

你也可以使用jQuery Mobile的网站，这是很好的移动设计www.jquerymobile.com –

感谢赛义德，但我需要它只有CSS工作。 – mindspins

-1

它可能有一些做与具有单独的文件，你的CSS。作为一般规则，您应该始终将所有CSS写入一个文件（style.css）。它不应该做，但只是为了清楚，把它们都放在同一个文件中，看看会发生什么。如果它不能评论这个，我会再看一次。

来源

2012-10-09 15:09:33

奇怪的是，这似乎并没有关系到其他网站。大多数WordPress主题总是使用多个CSS文件。希望这是问题...谢谢汤姆！ – mindspins

即使没有style.css（CSS重置），它似乎并没有工作汤姆。 – mindspins

在浏览器窗口大小调整@media工作，但不能在手机

回答

相关问题