Медиа-запросы для Samsung Galaxy S3

Question

У меня есть портфолио, которое я пытаюсь сделать отзывчивым, и я хотел бы показать его людям на моем S3, хотя у меня возникают проблемы с получением он работает с использованием медиа-запросов. Я использовал диагностический инструмент in this post и получил два разных значения ширины устройства в двух браузерах, установленных на телефоне (браузер Samsung по умолчанию и Chrome), поэтому я просто использовал «ширину» в сочетании с соотношением пикселей устройства.

Вот что у меня есть в моей таблице стилей:

body, html 
{ 
    display: block; 
    font-family: quicksand, arial; 
    background-color: #EFEFEF; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container 
{ 
    background-color: red; 
    width: 50%; 
    height: 50%; 
} 

@media only screen and (max-width: 22em) and (-webkit-device-pixel-ratio: 2) 
{ 
    #container 
    { 
     width: 100%; 
     height: 100%; 
     background-color: yellow; 
    } 
} 

По какой-то причине, цвет фона по-прежнему красный, даже при просмотре страницы на S3. Я что-то упустил?

Answer 1

На моем Samsung S3 с Android 4.1.2, в то время как я пытался все функции медиа запросов (макс-высота, ширина, высота и ширина устройства и даже цвет: 8) только это работало для меня:

/* Samsung S3 default browser portrait*/ 
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) { 
body { background:yellow;} 
} 

/* Samsung S3 default browser landscape */ 
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) { 
body { background:#000;} 
} 

Here is a screenshot для pieroxy тест средства диагностики средств массовой информации для всех возможных запросов.

Обращаем внимание, что оба они работают без ориентации, но не изменяют приличия без нагрузки/обновления.

Надеется, что это помогает не конфликтуют с другими запросами вы можете использовать