CSS для мобильных устройств иногда возвращается к оригиналу
Так что большую часть времени мои таблицы стилей отображаются правильно. Стандартный / оригинальный всегда работает безупречно, однако иногда кажется, что мобильный не учитывается при просмотре с мобильного устройства.
Я обозначил их следующим образом:
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />
Я использую Droid X для просмотра страницы в портретном режиме, поэтому ширина устройства не должна превышать максимальную ширину, указанную выше, но иногда, случайным образом, она по-прежнему возвращается к исходной странице CSS.
Есть ли какой-нибудь способ помешать этому?
4 ответа
Убедитесь, что ваш standard.css не влияет на каскад того, что вы ожидаете увидеть с mobile.css. Похоже, что мобильное устройство сначала загрузит ваш standard.css, а затем mobile.css - поэтому стили в обеих таблицах стилей влияют на отображение. Обычно я связываю свои элементы ссылок таблицы стилей в логику, которая отображает мобильное устройство только для таблицы стилей, а не для обеих таблиц стилей одновременно.
Также не забудьте включить этот метатег, чтобы убедиться, что ваша страница корректно масштабируется под размеры устройства:
<meta name="viewport" content="width=device-width" />
Попробуйте использовать тип носителя "портативный".
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
Может быть, использовать media="screen" для standard.css? Может быть, это помогает (:
Или проверьте user-agent на стороне сервера. Если это мобильное устройство, загружается только мобильная CSS, в противном случае загрузите standard.css.
Я использую WURFL, чтобы узнать, мобильное ли это устройство...
Я видел это раньше. Я верю, что размер элемента тела менялся. Правильный тип документа важен. Так должно быть:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">