Загрузить файл CSS только для Ipad - PullRequest
Новая
       7

Загрузить файл CSS только для Ipad

3 голосов
/ 03 февраля 2011

Я пытаюсь загрузить файл CSS только для Ipad. Я попробовал это: 

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css">

Это работает для iPad, но если я уменьшу свое разрешение до 1024 на 768 на рабочем столе и посмотрю сайт в Firefox, загрузится также таблица стилей ipad. Итак, я попробовал: 

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">

Но все та же проблема. Как я могу убедиться, что эта таблица стилей загружается ТОЛЬКО, если они просматривают страницу на iPad?

Ответы [ 4 ]

4 голосов
/ 18 сентября 2011

От: http://css -tricks.com / snippets / css / ipad-specific-css /

Это работает лучше для меня. 

@media only screen and (device-width: 768px) {

/ * Для обычных макетов iPad * /} 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

/ * Только для портретных макетов * /} 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

/ * Только для альбомных макетов * /}

1 голос
/ 03 февраля 2011

Какие технологии вы используете?Если у вас есть контроль над тем, что вы отображаете (на стороне сервера) на странице, вы можете проверить заголовок USER-AGENT в запросе.Если он содержит строку iPad, то выведите тег css, если нет, не включайте его.

Если вы просто отправляете статический html, это не будет работать.

0 голосов
/ 07 октября 2011

Из-за большого количества разных размеров и разрешений экрана я не смог использовать только медиа-запросы для этой проблемы.

Я уже включил http://www.modernizr.com/ во все мои проекты, поэтому я смог использовать комбинацию.Modernizr добавит класс .touch на сенсорных устройствах.Я бы посоветовал попытаться использовать .touch, чтобы определить, что это не ПК, а затем выполнить медиа-запрос, чтобы определить, какое это мобильное устройство.

0 голосов
/ 03 февраля 2011
...