Отзывчивый дизайн не работает на Android?

Question

Я тестирую как Nexus 4 - 4.1.1 - 768x1280, так и Xperia Z - 4.2.2 - 1080x1920 ... В обоих случаях мой сайт (который реагирует на настольные компьютеры) лишь частично реагирует на телефоны Android. WP8 работает отлично (удивительно) - и iPhone 5 работает - кроме высоты немного больше, чем должно быть (липкий нижний колонтитул не появляется). Это похоже на то, что CSS считает, что есть дополнительные 100 пикселей или около того - вещи просто немного срезаны, когда их не должно быть. Пример медиа-запроса:

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

Что здесь происходит?

Answer 1

Adroid телефон, как Nexus или Galaxy серии имеют «сетчатка desplay» мениц соотношение пикселя равно 2, так что вы должны добавить это (-webkit-мин-устройства пиксел соотношение: 2)

так

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

Answer 2

Попробуйте добавить 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 в то же время не используется target-densityDpi в моем 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 
    } 

Answer 3

Я использовал этот код в заголовке

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

он работал для меня

Answer 4

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

Версия на Android, которую вы используете, не поддерживает calc, и вы должны предоставить резервную копию. Я предлагаю примерно следующее:

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

Но теперь ваш пиксельный запас не приведет к центрированной компоновке. В этот момент, я предлагаю вам просто забыть «известково» вообще и использовать обычный «ол CSS:

width: 90%; 
margin: 0 auto;