Tailwind CSS 网站未显示响应版本 [关闭]
Posted
技术标签:
【中文标题】Tailwind CSS 网站未显示响应版本 [关闭]【英文标题】：Tailwind CSS Site not showing responsive version [closed] 【发布时间】：2019-07-20 18:32:59 【问题描述】：当我在 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>
【问题讨论】：
提问前请阅读what this site is about和“How to ask”。 【参考方案1】：在您的 HTML 中添加元标记。
“元”视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。
width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（这取决于设备）。
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【讨论】：
以上是关于Tailwind CSS 网站未显示响应版本 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
如何创建在英雄内容顶部下拉的响应式菜单（Tailwind CSS ...）[关闭]
Tailwind CSS 样式未应用于 Vercel 上已部署的 NextJs 应用程序
Tailwind css 类未在 Storybook 构建中显示