Медиа-запросы: избегая ненужной загрузки CSS/ изображений
Я читал об ключевом слове "only", но не могу найти однозначного ответа на этот вопрос.
Мне интересно знать, есть ли способ, использующий только CSS (не Javascript), избегать всех старых браузеров, которые не понимают медиа-запросы (например, старые мобильные телефоны), и современных браузеров, которые понимают медиа-запросы, но которые возвращают для них false (например, смартфоны с минимальной шириной устройства 740 пикселей) читают связанные файлы CSS и загружают связанные большие фоновые изображения. Я обеспокоен временем загрузки и пропускной способностью.
Если это невозможно, я думаю, что я буду использовать http://www.handsetdetection.com/features/mobile-browser-detection или http://www.hand-interactive.com/resources/detect-mobile-php.htm (решения на стороне сервера) для условного обслуживания, например, "полных" таблиц стилей, которые содержат, возможно, большие изображения только для устройств шириной от 740 пикселей и выше.
2 ответа
Я уверен, что вы должны использовать серверный скрипт для обнаружения или javascript. Но если вы работаете на стороне сервера, вы можете отображать свои собственные таблицы стилей в зависимости от того, что вы делаете или не хотите.
http://code.google.com/p/php-mobile-detect/
Это может быть хорошим местом для начала сборки библиотеки php.
Серверная сторона была бы моим предложением. Вы также можете использовать куки для хранения данных до конца сеанса и, возможно, если пользователь вернется. Храните что-то вроде того, хотят ли посетители видеть мобильную или полную версию. Вы можете проверить его на уровне apache в.htaccess, чтобы сделать его чрезвычайно эффективным.