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

Я тестирую телефон Samsung Galaxy Nexus с экраном шириной 720 пикселей. Это то, что я пытался использовать, чтобы использовать мобильный CSS-лист только для мобильных устройств:

<link href="mobile.css media="only screen and (max-device-width:780px) rel="stylesheet" />

А также с использованием:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

масштабировать настольную версию для планшетов.

Может кто-нибудь сказать мне, что я делаю неправильно здесь?


mobile html css viewport
person user404    schedule 15.10.2012    source источник
comment
Вы пропустили " после "mobile.css   -  person sachleen    schedule 15.10.2012
comment
media="only screen and (max-device-width:780px) ‹--- здесь также отсутствует закрывающая цитата   -  person Giona    schedule 15.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

Я предпочитаю просто использовать медиа-запросы в моем основном файле css, чтобы выполнить то же самое. Может сделать вашу жизнь проще.

person Jason Lydon    schedule 15.10.2012
comment
Моя единственная проблема с этим заключается в том, что между мобильной и настольной / планшетной версией есть несколько различий в дизайне. Поэтому вызывает серьезные CSS - иначе я бы полностью использовал @media {} - person user404; 15.10.2012
comment
Я использую эту технику все время, используя одну таблицу стилей и минимально возможное количество таблиц стилей. Один из способов, которым я пытаюсь упростить свой процесс, - сделать родительскую оболочку статической ширины, а все ее дочерние элементы - плавными/отзывчивыми. Затем, когда макет достигает определенной ширины, сделайте родительский элемент также плавным (то есть ширина: 100%). Когда родитель изменяет размер, все дочерние элементы уже готовы сделать то же самое. Я думаю, что такой подход в долгосрочной перспективе экономит размер k. - person Jason Lydon; 30.01.2013