Nano Hash - криптовалюты, майнинг, программирование

CSS Media Queries на Nexus 7, разрешение экрана не работает в коде

Я работаю с CSS Media Queries, чтобы загружать разные шаблоны для устройств разного размера. Я создал электронную таблицу, в которой перечислены разрешения экрана тестируемых устройств и наиболее распространенные устройства, в которых указаны ограничения по размеру. Одно из устройств, которые я тестирую, — это Nexus 7, разрешение экрана которого, как я обнаружил, составляет 1280 × 800. Однако, когда я использую эти значения в своем коде, это не работает.

** единственная причина, по которой я не использую максимальное или минимальное значение, заключается в том, что я пытаюсь найти точное разрешение. Если я заменю max-device-width на что-то довольно большое, это сработает, и я провел достаточно тестов, чтобы знать, что он работает с различными заданными максимальными значениями, но для того, чтобы правильно завершить мой код, чтобы различать 3 категории устройств разного размера. , я должен убедиться, что создаю правильные отсечения. Отличается ли разрешение CSS? Заранее спасибо за любую помощь!

@media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sack of space */
} 

@media only screen and (device-width:800px) and (orientation:portrait) {

/*style --code removed for sack of space */

}    

Вот мой код области просмотра в моем html-файле

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

  • Я знаю, что есть некоторые устройства, в которых «ширина» и «ориентация» не всегда сочетаются разумным образом. Вы пытались настроить таргетинг на @media only screen and (device-width:1280px) and (orientation:portrait) ? 21.08.2012
  • Спасибо за ответ. Путем проб и ошибок я обнаружил, что ширина устройства и высота устройства составляют 966 пикселей и 909 пикселей соответственно. 22.08.2012
  • Да, это устройство с высоким разрешением, поэтому пиксели масштабируются для удобства чтения. На моем Nexus 7 я вижу 962px на 553px со скрытой строкой состояния и включенной системной панелью. 06.09.2012

Ответы:


1

Существует разница между размерами экрана в пикселях CSS и пикселях устройства.

В случае с nexus 7 родные пиксели устройства составляют 1280 x 800 пикселей.

Однако, если бы это была заявленная ширина для медиа-запросов, мы бы закончили тем, что адаптивный дизайн срабатывал бы для традиционных размеров рабочего стола.

В результате многие браузеры выбирают размер пикселя CSS, который больше напоминает размер традиционных пикселей до отображения высокой плотности пикселей. В значительной степени размер iPhone 1 - 3 пикселя.

Отчеты о соотношении пикселей устройства (пиксели устройства / пиксели CSS)

e.g. 800 / 600 = 1.3333

Чтобы добавить еще больше путаницы, эти соотношения иногда меняются в разных выпусках ОС. Например, начиная с Jelly Bean 4.2, мой Nexus 7 сообщает о ширине 600 пикселей в портретной ориентации по сравнению с 603.

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

Удачи :)

16.11.2012

2

Используйте следующий код области просмотра:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

или это для запрета масштабирования:

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

Странная часть Nexus 7 заключается в том, что (как опубликовано jpgr) он не позволяет вам использовать пространство 1280/800, которым он может похвастаться (по крайней мере, из коробки). Это почти так, как если бы он в некоторой степени увеличивался, несмотря на установленные параметры масштабирования.

Я замечаю эту проблему, когда моя графика кажется слегка размытой. Я проверил размер окна с помощью javascript, и он опубликовал числа примерно на 25% меньше, чем ожидалось. Вы заметите, что я исключил параметры масштабирования, поскольку по большей части они игнорируются.

Настоящим ключом является использование target-densitydpi = device-dpi... Кажется, это очень правильно.

Люблю работать с Nexus 7 точно!!!

05.09.2012
  • Просто примечание: target-densitydpi=device-dpi, к сожалению, действительно может испортить 4-дюймовые экраны с разрешением 960 пикселей. Вы можете проверить наличие устройства с помощью javascript и динамически обновлять содержимое области просмотра с помощью этого тега, но это довольно хлопотно. 05.09.2012
  • У меня такая же проблема. Однако я запутался, эти настройки области просмотра решают проблему? 06.09.2012
  • Приведенный выше метакод окна просмотра позволяет использовать в браузере известные значения 1280x800 (поскольку устройство рекламируется). Без этого кода области просмотра вы получите размер экрана ближе к 966px и 909px, как указано в jpgr. Роббо упомянул, что это может вызвать проблемы с другими устройствами, и я говорю только о Nexus 7. Пиксели не отображаются 1:1, поэтому графика может стать немного нечеткой. Просто имейте в виду, что для медиа-запросов вы должны использовать значения, которые фактически отображаются в браузере, а не то, что рекламируется на устройстве. 12.09.2012
  • Чтобы добавить, target-densitydpi больше не поддерживается в Chrome для Android. 01.03.2013

  • 3

    Чрезмерно прагматичный ответ, но вы можете в основном использовать размер экрана 601x880 для таргетинга на Nexus 7. Технически не полный, но этого должно быть достаточно для начала, если вы пытаетесь использовать точки останова в своих медиа-запросах.

    16.01.2013
  • Использование: (min-device-width: 601px) и (max-device-width: 880px) сработало для меня, спасибо! 10.04.2013
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

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

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..