2012-05-09 2 views
0

При проверке моего сайта на мобильном устройстве (iPhone) ясно, что он по-прежнему загружает таблицу не мобильных стилей. Вот код в заголовке, может кто-нибудь сказать мне, что случилось?Запрос СМИ CSS не работает

<link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mobile.css" /> 

<script type="text/javascript" src="js/jquery.js"></script> 

<script src="js/onclick.js" type="text/javascript"></script> 


<script> 

if (screen && screen.width > 480) 
document.write('<script type="text/javascript" src="js/jqFancyTransitions.js"><\/script>'); 

</script> 

Почему бы не использовать "styles_mobile.css", как это предусмотрено?

В любом ответе, пожалуйста, знайте, что я ограничил знание JavaScript

+0

Проблема в том, что в моем мобильном браузере используется лист styles.css, а не лист styles_mobile.css. Я думал, что настроил код для: 1. Обнаружите мобильный телефон и используйте указанный лист css в этом случае (запрос css media) 2. В случае мобильных не запускайте JS –

+0

Что делать, если вы удалите " только "перед экраном"? Это помогает? – kevin628

+0

Nope - это не сработало. Я удалил слово «только». –

ответ

1

Я думаю, что он нуждается в мета-видовых тег:

http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Это означает, что использовать ширину устройства, а не той ширины, о которой сообщает браузер в устройстве, что больше.

Технически для выполнения медиа-запросов по книге вам необходимо добавить атрибут «media» к элементу или добавить записи @media в ваш CSS.

+1

j0aqu1n

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