android - 响应式设计不适用于 Android？

Question

我正在 Nexus 4 - 4.1.1 - 768x1280 和 Xperia Z - 4.2.2 - 1080x1920 上进行测试...在这两种情况下，我的网站(在台式机上响应)仅在 Android 手机上部分响应。 WP8 工作正常(令人惊讶)- iPhone 5 工作- 除了高度比应有的高一点(粘性页脚未显示)。就好像 CSS 认为还有 100px 左右的额外空间——事情只是在不应该的时候被稍微切断了。媒体查询示例:

/* if device is less than 768px */
@media (max-width: 768px) {
    .container{
        width: auto;
        max-width: calc(100% ~"-" 20px);
        margin-left: 10px;
    }
    .banner-info{
        padding-right: 15px;
        width: auto;
        max-width: 300px;
        font-size: 13px !important;
    }

} 

在我的标题中:

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是怎么回事？

Answer 1

尝试将 target-densityDpi=device-dpi 添加到您的 meta viewport。这是 Android 特定的值。

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

更新:

我最近发现不再支持target-densityDpi。我通过将 -webkit-min-device-pixel-ratio 与 max-width 结合解决了类似的问题，同时也没有使用 target-densityDpi我的 元视口(viewport):

    @media  all and (max-width:360px),
            screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px),
            screen and (-webkit-min-device-pixel-ratio: 2.0) and (max-width: 720px) {
        // CSS HERE
    }