Question

当我在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>

Answer 1

在HTML中添加meta标签。

“元”视口元素为浏览器提供了有关如何控制页面尺寸和缩放比例的说明。

width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。

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

Tailwind CSS网站未显示响应版本

1 个答案: