响应式设计不适用于Android？ [英] Responsive design not working on Android?

问题描述

我在测试Nexus 4 - 4.1.1 - 768x1280和Xperia Z - 4.2.2 - 1080x1920 ...在这两种情况下，我的网站（这是响应在桌面上）只是部分响应在Android手机。 WP8工作正常（令人惊讶） - 和iPhone 5工程 - 除了高度比它应该多一点（粘性页脚不显示）。它好像CSS认为有一个额外的100px左右 - 事情只是轻微切断，当他们不应该。一个示例媒体查询：

I'm testing on both Nexus 4 - 4.1.1 - 768x1280 and Xperia Z - 4.2.2 - 1080x1920... In both cases, my site (which is responsive on desktops) is only partially responsive in android phones. WP8 works fine (surprisingly) - and iPhone 5 works - except the height is a little more than it should be (sticky footer isn't showing up). It's as if the CSS thinks there's an extra 100px or so - things are just slightly cut off when they shouldn't be. An example media query:

/* 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;
    }

} 

>

In my header:

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

这是怎么回事？

推荐答案

尝试将 target-densityDpi = device-dpi 添加到您的元视口。这是一个 Android 特定值。

Try adding target-densityDpi=device-dpi to your meta viewport. It's an Android specific value.

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

更新：

不再支持 target-densityDpi 。我通过将 -webkit-min-device-pixel-ratio 与 max-width 组合，同时也解决了类似的问题在我的 meta视口中使用 target-densityDpi ：

I recently found out that target-densityDpi is no longer supported. I solved a similar problem by combining -webkit-min-device-pixel-ratio with max-width while also not using target-densityDpi in my meta 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
    } 

这篇关于响应式设计不适用于Android？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！