Различные дисплеи на больших мониторах

Question

Я хотел бы иметь разные дисплеи на своем веб-сайте. Я уже обрабатывал смартфоны, планшеты и настольные компьютеры, но я бы сделал что-то для больших экранов, и я говорю не только с точки зрения разрешения. Я хочу, чтобы дисплей отличался на экранах более 21 дюйма. Он не должен выглядеть так же на 15-дюймовом ноутбуке, хотя оба они имеют одинаковое разрешение.

Я пытался использовать медиа-запросы на основе плотности пикселей, но я получаю смешанные результаты, поэтому я не уверен, что это лучший подход. Я пробовал:

@media screen and (max-resolution: 115dpi){ 
    /* CSS rules */ 
} 

У меня пока нет результатов, которых я хотел. Я тестирую 23-дюймовый монитор с разрешением 1920x1080 и плотностью пикселей 94.53 и 13-дюймовым MacBook с разрешением 1440x900 и плотностью пикселей 127.68. Однако на обоих устройствах дисплей одинаковый, но, похоже, он работает на некоторых других ноутбуках с разными разрешениями. Поэтому я смущаюсь.

Что мне не хватает? Использует ли плотность пикселей наилучший подход? В противном случае, какой у меня выбор?

Благодаря

Answer 1

Люди используют, что для обслуживания привет разрешением изображения, и он все еще обнаруживается на настольных дисплеев.

Чтобы убедиться, что мобильные устройства отображения страницы на ширину устройства, вам нужно добавить видовых мета-тег:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

Причина люди по-прежнему запрашивать видовой экран с, т.е. @media всех и (подразумевает наиболее width: 320px), потому что 320 пикселей все равно 320 px независимо от плотности пикселей. Он будет того же размера.

Answer 2

Похоже, вы пропускаете выражение в медиа-запросе, который использует функцию min-width СМИ:

Ширина функция медиа описывает ширину поверхности рендеринга выходного устройства (например, как ширина окна документа или ширины окна страницы на принтере ).

---

Добавить другой and логический оператор с последующей функцией min-width медиа и шириной выходного устройства, как правило, в пикселях.

---

Пример:

@media screen and (min-width:1680px) and (max-resolution: 115dpi) {}