响应式设计不适用于Android？

我正在测试Nexus 4 - 4.1.1 - 768x1280和Xperia Z - 4.2.2 - 1080x1920 ...在这两种情况下，我的网站（在台式机上都有响应）在Android手机中仅部分响应。 WP8的工作正常（令人惊讶） - 和iPhone 5的作品 - 除了高度是应该多一点（粘脚没有出现）。就好像CSS认为有一个额外的100px左右 - 当它们不应该是时，事情就会被略微切断。一个例子媒体查询：响应式设计不适用于Android？

/* 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">

这是怎么回事吗？

来源

2014-01-21 SB2055

如果你尝试什么'@media屏幕（最大宽度：768px）{...}'代替？ –

@beworker正在尝试.. – SB2055

@beworker - 没有工作......我也用逗号替换了分号，它没有工作。没有错误，只是大小不正确。 – SB2055

的Adroid电话例如Nexus或银河系列具有“视网膜desplay”悲风像素比为2，所以你必须添加此（-webkit分钟设备像素比：2）

所以

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

来源

2014-01-25 20:18:51

这个工具应该有助于找到每个设备的exqct查询http://pieroxy.net/blog/pages/css-media-queries/test-features.html –

我刚刚尝试过 - 我的桌面上的响应停止工作，所以这是不没有选择。除非你说我需要重复查询，一个用于桌面，另一个用于android？我希望不是... – SB2055

我真的犯了一个错误，你必须用像素比例检查像素数除以手机的最大宽度和像素比率的确切数量[链接] pieroxy.net/blog/pages/css-media-查询/测试功能.html [链接] –

尝试增加target-densityDpi=device-dpi您meta viewport。这是一个Android具体的价值。

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

UPDATE：

我最近发现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 
    }

来源

2014-01-28 07:29:14

我用这个代码在头

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

它为我工作

来源

2014-02-01 16:09:05

I不打算投票，但禁用缩放不应该是你的样板或复制/粘贴工具箱的一部分。你应该只是在你绝对确定**时故意**禁用缩放** **你的用户永远不会**想要缩放。（我说“想要”b/c与你认为用户需要的“非常不同”）。 –

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

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

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

但现在你的基于像素的利润率不会导致中心的布局。在这一点上，我建议你就忘了“钙”完全和使用普通的“醇CSS：

width: 90%; 
margin: 0 auto;

来源

2014-02-01 18:39:59

我不知道为什么这是被投票的，你绝对正确的是，在Android 4.4/KitKat使用股票浏览器和web视图之前，calc不起作用。 –

响应式设计不适用于Android？

回答

相关问题