Tailwind CSS网站未显示响应版本 [英] Tailwind CSS Site not showing responsive version
问题描述
当我在Chrome中查看此网站并使用开发工具查看移动网站时，它正确显示为1列，但从iPhone观看时仍显示为2列?
When I view this site in Chrome and use dev tools to view mobile site it correctly shows as 1 column but when viewed from iPhone still 2 columns?
<!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>
推荐答案
在HTML中添加meta标签.
Add the meta tag in your HTML.
元"视口元素为浏览器提供了有关如何控制页面尺寸和缩放比例的说明.
A 'meta' viewport element gives the browser instructions on how to control the page's dimensions and scaling.
width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度(视设备而定).
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别.
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这篇关于Tailwind CSS网站未显示响应版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
