CSS для мобильных устройств иногда возвращается к оригиналу - PullRequest
Новая
       16

CSS для мобильных устройств иногда возвращается к оригиналу

4 голосов
/ 23 февраля 2011

Так что большую часть времени мои таблицы стилей отображаются правильно.Стандартный / оригинальный всегда работает безупречно, однако иногда кажется, что мобильный не учитывается при просмотре с мобильного устройства

Я обозначил их следующим образом: 

<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 ]

2 голосов
/ 26 февраля 2011

Убедитесь, что ваш standard.css не влияет на каскад того, что вы ожидаете увидеть с mobile.css. Похоже, что мобильное устройство сначала загрузит ваш standard.css, а затем mobile.css - поэтому стили в обеих таблицах стилей влияют на отображение. Обычно я связываю свои элементы ссылок таблицы стилей в логику, которая отображает мобильное устройство только для таблицы стилей, а не для обеих таблиц стилей одновременно.

Кроме того, не забудьте включить этот метатег, чтобы убедиться, что ваша страница правильно масштабируется до размеров устройства: 

<meta name="viewport" content="width=device-width" />
0 голосов
/ 25 февраля 2011

Я видел это раньше.Я считаю, что размер элемента тела менялся.Правильный тип документа важен.Должно быть: 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
0 голосов
/ 25 февраля 2011

Попробуйте использовать тип носителя "handheld". 

<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
0 голосов
/ 24 февраля 2011

Может быть, использовать media = "screen" для standard.css?Может быть, это помогает (:

Или проверьте user-agent на стороне сервера. Если это мобильное устройство, загружающее только мобильное css, в противном случае загрузите standard.css.

Я использую WURFL, чтобы выяснить, является ли этомобильное устройство ...

...