У меня есть медиа-запрос -> @ media all AND (max-width: 1024) .. который хорошо работает на планшете Samsung, но мне нужно, чтобы он применялся только на планшете, а не на ПК. Если устройство - компьютер, он должен только @media screen и (max-width: 768px) .. как мне это сделать?
Css Media Queries специально для планшетов
Ответы (3)
Короткий ответ: нет.
Более длинный ответ: вы идете неправильно.
Легко попасть в ловушку использования ширины экрана для нацеливания на определенные устройства, но это кроличья нора Алисы в Стране чудес. Почему? Потому что ширина мобильных устройств совпадает с шириной рабочих столов.
Например, вот список ширины экрана, можете ли вы угадать, какие из них являются настольными?
1024
1366
1200
1080
Угадай, что? Бьюсь об заклад, вы ошиблись в своих догадках. Разрешение 1024 и выше кажется «настольным», но у iPhone 5 Retina - 1136x640, а у iPad 3-го поколения - 2048x1536. Чтобы еще больше усложнить ситуацию, многие люди на настольных компьютерах не поддерживают свои браузеры развернутыми, поэтому ширина устройства не равна ширине браузера. А что происходит на Kindle, у которого разрешение выше, но при этом увеличивается размер текста?
И на рынок регулярно выходит все больше устройств.
Итак, ваш лучший выбор? Полностью отказаться от таргетинга на определенные устройства или классы устройств. Если вам абсолютно необходимо, используйте JavaScript для поиска сенсорных экранов (поскольку это наиболее вероятная причина, по которой вам нужно настроить интерфейс специально для определенного класса устройств).
Вы по-прежнему можете использовать медиа-запросы для определения ширины (или еще лучше, по моему опыту, использовать пропорциональные медиа-запросы), но не ожидайте, что он обязательно будет работать на данном устройстве.
person
Shauna
schedule
06.03.2013
Частично правильно. Физическое разрешение не имеет ничего общего с заявленным разрешением. В CSS ширина iPhone по-прежнему составляет 320 пикселей. Чтобы расширить ответ Шоны, прочитайте статью: Точки останова по умолчанию для адаптивного веб-дизайна не работают
- person fregante; 06.03.2013
@ bfred.it - Тогда вы также поймете, что пиксели CSS не совпадают с пикселями устройства. Честно говоря, это все гигантский кластер, пока вы не избавитесь от зависимости от устройств.
- person Shauna; 06.03.2013
Хорошая статья о пропорциональных медиа-запросах. RWD - это слишком много работы, потому что иногда мы хотим, чтобы части веб-сайта имели минимальную ширину, независимо от того, на каком устройстве. но пиксели отличаются от одного устройства к другому. Спасибо хоть.
- person Afroman Makgalemela; 08.03.2013
вы не можете проверить устройство (ПК, планшет, карманный компьютер) с помощью медиа-запросов, только для ширины устройства (больше, я знаю, но op запросите ширину устройства).
Возможно, эта статья поможет вам лучше понять Это?
person
Mark
schedule
06.03.2013
Медиа-запрос никогда не должен быть привязан к конкретному устройству - вы просто говорите «для вывода такого размера сделайте это, а для вывода другого размера сделайте то». Будь то телефон, компьютер, планшет, киоск, часы или что-то еще, не имеет значения. По этой причине медиа-запрос не позволяет вам запрашивать оборудование как таковое.
Вам может потребоваться другое поведение (а не стиль) в зависимости от возможностей устройства, например, это «сенсорное» устройство? Но этим следует управлять с помощью JS, а не CSS.
Какова реальная цель вашего запроса? Имеет ли значение, что CSS применяется как к ПК, так и к планшету?
person
Purpletoucan
schedule
06.03.2013
