响应式设计不适用于 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 结合起来解决了类似的问题，同时在我的meta viewport 中也没有使用target-densityDpi：

    @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
    } 

Answer 2

http://caniuse.com/#feat=calc

您正在使用的 Android 版本不支持calc，您必须提供备用。我建议是这样的：

width: 90%; /* fallback */
width: calc(100% - 20px);

但是现在您的基于像素的边距不会导致居中布局。在这一点上，我建议你完全忘记“calc”并使用普通的 'ol css：

width: 90%;
margin: 0 auto;

Answer 3

像 nexus 或 Galaxy 系列这样的 Adroid 手机有一个“视网膜显示器”，意味着像素比是 2，所以你必须添加这个 (-webkit-min-device-pixel-ratio: 2)

所以

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio : 2)

Answer 4

我在标题中使用了这段代码

<meta name="viewport"
content="target-densitydpi=device-dpi,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

对我有用