响应式设计无法在Android上运行？

我正在测试Nexus 4 – 4.1.1 – 768×1280和Xperia Z – 4.2.2 – 1080×1920 ……在这两种情况下,我的网站(对台式机都有响应)在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">

这里发生了什么？

解决方法:

尝试将target-densityDpi = device-dpi添加到元视口.这是Android特定的价值.

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

更新：

我最近发现不再支持target-densityDpi.我通过将-webkit-min-device-pixel-ratio与max-width结合起来解决了类似的问题,同时在我的meta视口中也没有使用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
    } 

标签：android,css,css3,responsive-design
来源： https://codeday.me/bug/20190825/1717304.html