响应式设计不适用于 Android？

Posted 2023-03-06

【中文标题】响应式设计不适用于 Android？

【英文标题】：Responsive design not working on Android?

【发布时间】：2014-02-11 12:38:33

【问题描述】：

我在 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">

这是怎么回事？

【问题讨论】：

如果您改用@media screen and (max-width: 768px) ... 会怎样？

@beworker 正在尝试..

@beworker - 这不起作用......我还用逗号替换了分号，但它不起作用。没有错误，只是尺寸不正确。

wtf 是 100% ~"-" 20px 在 calc 中的表达式？ 100% - 20px 工作正常。

javascript 认为窗口的宽度是多少？

【参考方案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
     

【参考方案2】：

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

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

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

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

width: 90%;
margin: 0 auto;

【讨论】：

我不知道为什么这被否决了，你是绝对正确的，在 Android 4.4/KitKat 之前 calc 不能在股票浏览器和网络视图中工作。

【参考方案3】：

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

所以

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

【讨论】：

这个工具应该可以帮助找到每个设备的 exqct 查询pieroxy.net/blog/pages/css-media-queries/test-features.html

我刚试过这个 - 我的桌面上的响应停止工作，所以这不是一个选项。除非您说我需要重复查询，一个用于桌面，一个用于 android？我希望不会……

我实际上犯了一个错误，你必须将像素数除以像素比，用手机检查最大宽度和像素比的确切数字 [link]pieroxy.net/blog /pages/css-media-queries/test-features.html[链接]

我不知道为什么我得到了 linus one 但它可以工作 @media (max-width: 384px) 和 (-webkit-min-device-pixel-ratio : 2)

【参考方案4】：

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

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

对我有用

【讨论】：

我不会投反对票，但禁用缩放不应成为样板文件或复制/粘贴工具箱的一部分。只有当您绝对确定您的用户永远不会想要缩放时，您才应该故意禁用缩放。 （我说“想要”b/c 它与您认为用户“需要”的非常不同）。