为什么 Tailwind 中的响应式网格不能在物理设备上运行，而是在响应式设计模式下运行？

Question

我正在尝试使用 TailwindCSS:

构建一个在较小设备上转换为普通块布局的网格

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet"/>
<section class="md:grid md:gap-3 md:h-screen h-auto md:grid-cols-3 p-5">
        <div
          class="md:col-start-3 h-screen md:h-auto mb-3 block relative rounded-lg md:row-span-2 bg-gradient-to-br from-gray-100 to-gray-50 p-4 text-gray-900 font-semibold"
        >
          Content
        </div>

        <div
          class="md:col-span-2 md:row-start-1 bg-gray-50 rounded-lg p-4 h-screen md:h-auto mb-2"
        >
         Content
        </div>

        <div
          class="md:col-span-1 bg-gray-50 rounded-lg h-screen md:h-auto mb-3"
        >Content</div>
        <div
          class="md:col-span-1 bg-gray-50 rounded-lg h-screen md:h-auto mb-3"
        >Content</div>
      </section>

问题：即使它在响应式设计模式下工作

它不适用于实际的 iPhone 8：

Full project

Answer 1

你把这个放在头上了吗？ <meta name="viewport" content="width=device-width, initial-scale=1.0">

为什么 Tailwind 中的响应式网格不能在物理设备上运行，而是在响应式设计模式下运行？

Why is the responsive grid in tailwind not working on physical device but in responsive design mode?

html

css

grid

responsive-design

tailwind-css