响应式设计不适用于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屋!