Tailwind CSS Сайт не показывает адаптивную версию

Question

Tailwind CSS Сайт не показывает адаптивную версию

Когда я просматриваю этот сайт в Chrome и использую инструменты разработчика для просмотра мобильного сайта, он правильно отображается как 1 столбец, но при просмотре с iPhone все еще 2 столбца?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body class="h-full font-proza">
<div class="container mx-auto flex justify-center">
    <div class="w-2/3">
        <!-- Two columns -->
        <div class="flex mb-4 flex-wrap md:flex-no-wrap">
            <div class="w-full md:w-1/2 md:mr-10 mr-0">
                Left Text
            </div>
            <div class="w-full md:w-1/2 mt-10 md:mt-0">
                Some Text
            </div>
        </div>

    </div>
</div>
</body>
</html>

-2

css tailwind-css

Источник

user2886044 27 фев '19 в 05:33

1 ответ

Решение

Другие вопросы по тегам css tailwind-css

user6602363 27 фев '19 в 05:40 2019-02-27 05:40 · Accepted Answer · 2019-02-27 05:40

Добавьте метатег в ваш HTML.

Элемент окна просмотра "meta" дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.

Параметр width=device-width устанавливает ширину страницы, которая соответствует ширине экрана устройства (которая зависит от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

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