WedX - журнал о программировании и компьютерных науках

CSS Media Query для таргетинга на телефоны 1080?

Я ищу правильный медиа-запрос CSS для всех телефонов (не планшетов и больше), включая телефоны 1080, такие как Sony Xperia Z.

Прямо сейчас я использую:

<link href='style/mobile.css' rel='stylesheet' type='text/css' media='screen and (max-device-width: 767px)' />

Это работает для большинства устройств, но в браузере Android Firefox (не Chrome, как ни странно) Xperia Z просто получает только сайт для рабочего стола.

Я пробовал искать, но кажется, что никто не говорит об этих новых телефонах с очень высоким разрешением, есть ли новый стандарт, которого я должен придерживаться?

html css media-queries screen-resolution
17.04.2013

  • Если устройства имеют одинаковый размер, какие стили должны применяться к телефонам, а не к планшетам? 17.04.2013
  • @cimmanon - разрешение не обязательно определяет размер устройства. Я вижу ситуацию, когда вы хотите настроить таргетинг только на телефоны, потому что они, как правило, физически меньше, несмотря на то, что иногда они имеют высокое разрешение. 17.04.2013
  • Да, полный рабочий стол выглядит далеко не так хорошо, как мобильный сайт на Xperia Z, по крайней мере, в моем случае. 17.04.2013

Ответы:


1

Используйте max-width вместо max-device-width для цели CSS pixels.

Не забудьте viewport meta. Маленькие устройства с большим количеством пикселей по-прежнему будут иметь низкое количество пикселей CSS, поэтому он просто будет работать.

04.12.2017
  • Метатег viewport спасет вас в разных браузерах на одном устройстве. 15.03.2019

    • 2

    Вы можете комбинировать ширину с разрешением в своем медиа-запросе.

    @media screen and (max-device-width: 767px) and (min-resolution: 300dpi) { … }
    18.04.2013
  • Спасибо, но это больше не работает на устройстве с более низким разрешением, например, на Galaxy Nexus (еще не тестировалось на Xperia) 18.04.2013

    • 3

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

    Вот функции мультимедиа, которые вы можете запросить в соответствии с w3c...

    https://www.w3.org/TR/css3-mediaqueries/#media1

    ... кажется, нет того, что вы ищете.

    К сожалению, я не знаю, есть ли отличный способ справиться с этим, даже пользовательский агент мало помогает.

    17.04.2013
    Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]