maxegorov
Здравствуйте!
Веду разметку сайта http://yarabarrozo.com.au/?mobile=y
Проблема в следующем. Есть 2 версии моб. сайта: для моб. устройств с разрешением менее 640 и выше 640.
По умолчанию показывается версия большая. Если экран устройства менее 640 пикселей, подгружается другой стилевик, который переопределяет размеры некоторых элементов. в <head> это выглядит так:
<!-- Основной стилевик -->
<link rel="stylesheet" href="/site/mobile.css" />
<!-- Стилевик для устройств с разрешением менее 640 пикселей по ширине -->
<link media="all and (max-width:639px)" rel="stylesheet" type="text/css" href="/site/mobile320.css" />
Это все работает на Android и на стационарном компьютере (для просмотра моб. версии нужно приписать параметр "?mobile=y"): при изменении размера окна браузера меняется и верстка.
Но это не работает на iPhone 4. Он упорно читает стилевик mobile320.css, хотя его разрешение выше 640. Браузер — Safari или Chrome последних версий. ОС — iOS 6 (на пятой та же проблема была).
Вьюпорт указан:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
Кто-нибудь сталкивался с такой проблемой? Очевидным решением кажется написать малую версию и подгружать стили для большой. Это решит проблему, однако оставит незакрытым вопрос: почему iPhone читает не предназначенные для него стили?
Спасибо.