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

Отзывчивый веб-сайт частично основан на устройстве, а не на разрешении экрана

У меня есть адаптивный веб-сайт с точками останова, настроенными с помощью запросов @media. У меня есть пара основных точек останова

  1. min-width: 1600px — для телевизоров и экранов с большим разрешением (которые просто центрируют всю страницу и делают белые поля по бокам, ничего особенного)

  2. max-width: 1024px - для планшетов есть много изменений, особенно потому, что планшеты имеют сенсорный экран, которого обычно нет на настольных компьютерах. Вообще выглядит совсем иначе.

  3. max-width: 600px - для смартфонов также много изменений, основанных, в частности, на сужении контента из двух или четырех столбцов в один.

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

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

Я знаю, что есть такие вещи, как пользовательские агенты, такие как WURFL, которые идеально подходят для этого. Но есть ли способ связать это значение из WURFL (планшет, рабочий стол, смартфон...) с запросами css @media.

Например, определить в WURFL, что устройство является планшетом, и изменить значение точки останова в файле CSS, чтобы он отображал версию для планшета, а не версию для настольного компьютера? Или есть другой способ с аналогичным результатом, как это теоретическое решение?

javascript user-agent css responsive-design media-queries
10.09.2014

  • Почему бы не предоставить пользователям выбор, какой интерфейс им использовать? 10.09.2014
  • Суть адаптивного дизайна в том, что вы не разрабатываете дизайн для устройств. То, что вы описываете, не совсем адаптивный дизайн. Вы должны прекратить тестирование для устройств и просто использовать медиа-запросы, чтобы убедиться, что сайт хорошо выглядит во всех измерениях. 10.09.2014
  • @RobG Я не уверен, что ты имеешь в виду. Если я куплю планшет с большим разрешением, как на десктопе, я все равно хотел бы иметь версию для планшета, которая выше, имеет более крупные ссылки и кнопки и более удобна в управлении и чтении для пользователя планшета. 10.09.2014
  • Вы должны контролировать это с помощью медиа-запроса, а не путем тестирования разрешений. 10.09.2014
  • @moss Но что, если я сосредоточусь не только на том, чтобы он хорошо выглядел, но и на функциональности для разных платформ. Пользователь планшета имеет только сенсорный экран, в противном случае пользователь настольного компьютера имеет клавиатуру и мышь для управления Интернетом. Это два разных мышления. В планшетной версии у вас, например, совсем другое меню, как на десктопе. Это просто сделано, чтобы быть более удобным на сенсорном экране. 10.09.2014
  • Все размеры вашего сайта должны быть функциональными как для мыши, так и для сенсорного управления. Существуют сенсорные экраны всех размеров, а некоторые устройства имеют как сенсорный экран, так и мышь. 10.09.2014
  • Они функциональны для обоих corse. Но если у вас есть планшет, у вас обычно только сенсорный экран, я не говорю все время, но обычно. Когда у вас есть компьютер, вы обычно работаете с мышью, опять же не всегда. Конечно, вы можете иметь сенсорный экран на рабочем столе. Но это просто разные устройства, так почему дизайн не может основываться на типе устройства, а не на разрешении? Конечно, у вас может быть функциональная настольная версия на планшете, но не лучше ли иметь эту версию для планшета, которая просто немного лучше подходит для планшетного устройства. 10.09.2014
  • В настоящее время медиа-запросы не охватывают такие вещи, как «является ли основной метод ввода касанием или мышью?»… Я думаю, вам лучше здесь с небольшим фрагментом JS, который выясняет это и добавляет класс к элементу html на основе этого, на который могут ссылаться ваши правила CSS. 10.09.2014
  • @CBroe Да, это было полезно, спасибо. 10.09.2014

Ответы:


1

Нет необходимости идентифицировать устройство, просто используйте правильные медиа-запросы.

    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
10.09.2014

2

Я думаю, ты ищешь это

Код jQuery для обнаружения мобильных устройств

http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/

10.09.2014
  • Это не совсем то, о чем я просил. В своем вопросе я упомянул, что знаю о WURFL.js, который говорит мне, является ли он планшетом, мобильным устройством или чем-то еще. Мне нужно больше знать, как это как-то связать с медиа-запросами CSS. 10.09.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..