Медиа-запрос CSS для нескольких разрешений

#ipad #html #css #tablet #media-queries

#iPad #HTML #css #планшет #медиа-запросы

Вопрос:

Я рассматриваю возможность использования медиа-запроса CSS для поддержки нескольких планшетов (Android / iPad). Ниже приведен медиа-запрос, который у меня есть;

 <link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css">
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">

Теперь я предполагаю, что ширина большинства планшетов меньше 1024 пикселей. Пожалуйста, поправьте меня на этом фронте. Любое табличное сравнение было бы отличным.

Также подойдут любые другие подходы, помимо ширины устройства для медиа-запроса.

Я рассматриваю общий способ проектирования моих страниц, который будет работать как для настольных, так и для планшетных браузеров … настоящего и будущего (и, возможно, даже для мобильных устройств). Я использую fluid design (или называемый адаптивным дизайном) для того же (все в%…ширина / высота / отступ / поле — все в%)

1. Вы пытаетесь основывать это на разрешении или на устройстве, являющемся планшетом, а не настольным компьютером? Если вы хотите настроить таргетинг только на планшеты, я бы не использовал разрешение. Это определенно прекратится в течение 6 месяцев по мере увеличения разрешений. Уже существуют планшеты с разрешением выше 1024 пикселей. Смотрите en.wikipedia.org/wiki/Comparison_of_tablet_computers .

Ответ №1:

Имейте в виду, что такое устройство, как iPad, может использоваться как в книжной, так и в альбомной ориентации, поэтому я бы использовал следующий медиа-запрос:

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

    /* .touch class from Modernizr */
    .touch .element {color: #fff;}

}

Или, если вы хотите сохранить стили в их собственном документе:

<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">

Примечание: Обычно вы могли бы обнаруживать планшеты, комбинируя мультимедийные запросы с библиотекой обнаружения функций, такой как Modernizr.

1. Я знаю, как настроить таргетинг только на iPad… Я рассматриваю общий способ написания медиа-запроса для нескольких планшетов..

2. Это сложно; Galaxy Tab имеет разрешение 1280×800, которое вы также можете найти на «нетбуках». К сожалению, ваш лучший выбор, скорее всего, заключается в том, что пользовательский агент прослушивает, если вы пытаетесь настроить другое поведение в зависимости от класса устройства.

3. Я обновил ответ, чтобы упомянуть об обнаружении поддержки сенсорных событий.