CSS-медиа запрашивает минимальную ширину и минимальную ширину устройства?

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

Я хотел бы настроить таргетинг как на обычные компьютеры, так и на устройства с одинаковыми точками останова, поэтому я просто дублировал все мои запросы ширины min и max на запросы min-device и max-device width. По какой-то причине, когда я добавляю копии -device, мой CSS интерпретируется по-разному на обычных компьютерах, и я не уверен, что я делаю неправильно.

Вы можете увидеть эффекты здесь (это то, что ДОЛЖНО выглядеть)

И здесь (после добавления -device-width к моим запросам мой CSS закручивается с наименьшей шириной – большие разрешения видны даже тогда, когда ширина браузера меньше, чем то, что вызывается).

Вот мои ссылки CSS – есть ли что-то не так с моим синтаксисом? :

      

Ширина устройства относится к разрешению дисплея (например, 1024 от 1024×768), а ширина относится к ширине самого браузера (который будет отличаться от разрешения, если браузер не максимизируется). Если ваше разрешение достаточно велико, чтобы вы попали в одну точку останова, но ширина браузера достаточно мала, чтобы вы попали в другую, вы получите нечетную комбинацию обоих.

Если у вас нет законных оснований для ограничения таблиц стилей на основе разрешения, а не размера windows просмотра, просто используйте min-width / max-width и избегайте max-width min-device-width / max-device-width .

  • Каковы правила совпадения запросов медиа-запросов CSS?
  • Вложенные правила @media в CSS
  • CSS-медиа-запрос для iPad и iPad?
  • Запросы СМИ не ведут себя так, как ожидалось на Android
  • Общие запросы CSS Media Break Points
  • Медиа-запросы и фоновые изображения
  • В чем разница между max-device-width и max-width для мобильной сети?
  • Как удалить отзывчивые функции в Twitter Bootstrap 3?
  • Запуск jquery с запросами css media
  • CSS Media Query - Soft-клавиатура нарушает правила ориентации CSS - альтернативное решение?
  • Расширение селекторов из медиа-запросов с помощью Sass
  • Interesting Posts

    Остановить движение / rotation сразу после столкновения

    Приобретать / выпускать семантику с невременными магазинами на x64

    Передача двумерного массива структур

    Asp.NET Web API – 405 – HTTP-глагол, используемый для доступа к этой странице, недопустим – как установить сопоставления обработчиков

    Концепция концепции проверки Struts 2

    Power BI Встраивание URL-множественных фильтров

    Как удалить символ из строки с помощью Javascript?

    Загрузка файла с помощью parseRequest от ServletFileUpload?

    Rails form_for: remote => true не вызывает метод js

    В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin» – при попытке получить данные из REST API

    Как я могу предотвратить кражу данных у компании?

    Java Преобразует целое число в шестнадцатеричное целое

    Как решить «Выполнение плагинов, не охватываемых конфигурацией жизненного цикла» для Spring Data Maven Builds

    Долгосрочные неверные предположения о программировании

    Grub dual boot-debian wheezy (зашифрованный) с другой ОС

    Давайте будем гением компьютера.