Запросы CSS-медиа игнорируются на iPhone (4S)

Я боюсь довольно странного поведения на iPhone. Вот очень простой веб-сайт, я положил на бесплатном хостинге, так что если у вас есть iPhone вы можете увидеть сами: http://ainkin.bugs3.com/Запросы CSS-медиа игнорируются на iPhone (4S)

Содержание HTML является:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" type="text/css" href="style.css">   
     <title>iPhoon test</title> 
    </head> 

    <body> 

    ***some content**** 

    </body> 
</html>

Содержание CSS является:

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

@media screen and (max-width: 1000px), 
@media screen and (max-device-width: 1000px) { 
    body { 
     background: red; 
    } 
}

Повсюду я выгляжу как правильный HTML + CSS, и он должен окрашиваться в красный цвет на всех устройствах с шириной ниже 1000 пикселей, он отлично работает на ПК, даже в эмуляции устройства Chrome на iPhone 4, но на реальном iPhone 4S он получает игнорируется, и я вижу белую страницу.

Может кто-нибудь, пожалуйста, совет, что мне с этим делать? Это упрощенный пример, мой реальный код намного сложнее и имеет множество точек останова, они отлично работают на ПК, планшете Android и IE Windows Phone, но я не могу заставить их работать на iPhone.

источник

2015-09-01 pokrishka

@media screen and (max-width: 1000px) { 
    body { 
     background: red; 
    } 
} 

@media screen and (max-device-width: 1000px) { 
    body { 
     background: red; 
    } 
}

Попробуйте отделить медиа-запросы и посмотреть, поможет ли это.

источник

2015-09-01 11:03:14

Это работает, спасибо большое! – pokrishka

@pokrishka Рад, что я мог бы помочь :) –

Запросы CSS-медиа игнорируются на iPhone (4S)

ответ

Смежные вопросы