У меня есть следующий код в HEAD
для использования разных таблиц стилей для разных размеров устройства/экрана:
<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">
<!-- mobile stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='only screen and (max-device-width: 480px) and (min-device-width : 320px)'>
<!-- if ie version 9 or less -->
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->
Внутри defaultStyle_mobile.css
в качестве теста я добавил *{display: none}
чтобы сделать всю страницу пустой. Я посетил здесь http://www.responsinator.com/ для просмотра моей веб-страницы, и похоже, что таблица стилей мобильных телефонов не используется. Любая идея, как это исправить?
Попробуйте заменить свои таблицы стилей для мобильных устройств такими:
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="theStyles/defaultStyle_mobile.css" />
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='theStyles/captionStyle_mobile.css' />
Если это не так, то проблема с симулятором. Попробуйте изменить размер вашего браузера.
http://www.responsinator.com
URL-адрес с использованием iframe, так что обычно это ваш веб-CSS, а не мобильный CSS. другими словами, это не симулятор iphone.