Squeak.ru - шаблоны программирования

мета вьюпорт только для мобильных устройств (ширина экрана менее 640)

Я делаю сайт, который должен масштабироваться на экране шириной более 640 (десктоп и планшет) и отображаться как мобильная версия на устройствах менее 640 (смартфоны).

Поэтому мне нужен meta[name=viewport] для смартфонов, а для других устройств он не нужен.

Сейчас использую в голове такой код

<script>
        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {
            document.write("<meta content='width=device-width, initial-scale=1' name='viewport'>");
        }
</script>

Но не помогает отсеять устройства шириной более 640 (планшеты).

Обнаружение screen.width в голове также не помогает, потому что андроиды возвращают неверную ширину, если перед этим не объявляется мета-вьюпорт.

Кто-нибудь знает, как обнаружить таблетки в голове или добиться желаемых результатов.


  • Если вы работаете с Wordpress, github.com/scottsweb/mobble, вероятно, будет хорошей идеей. Он обнаруживает все виды браузеров и устройств. Таким образом, вы можете просто сказать что-то вроде: Если ( is_mobile() ....... 28.06.2014
  • Спасибо, я работаю только над интерфейсом 29.06.2014

Ответы:


1

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

В раздел head можно добавить:

‹ meta name="viewport" content="width=device-width" >

В вашем css вы должны сделать это, чтобы он определял размер экрана и реагировал (изменялся) в зависимости от вашего дизайна на ширину более 640 пикселей.

Экран @media и (минимальная ширина: 640 пикселей) {

// здесь какой-то код

}

Этот сайт может помочь вам научиться адаптивному веб-дизайну http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/

27.06.2014
  • Спасибо за ваш ответ, я имею в виду другую проблему. Я уже сделал адаптивный веб-дизайн с медиа-запросами, но не смог добиться масштабирования для планшетов и адаптивной версии для телефонов. В этом была проблема. Как по мне, проблема была в initial-scale=1, когда я это закинул, все стало на свои места. Не знаю, хороший ли это ход, но он работает. 28.06.2014
  • Так вот вопрос почему начальный масштаб убил мобильные версии на смартфонах 28.06.2014
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...