缺少viewport标签是Bulma布局失效的首要原因，因浏览器未进入移动端渲染模式，导致其max-width媒体查询全部失效，页面按980px桌面宽度缩放显示。
缺少 <meta name="viewport"> 标签是 Bulma 布局乱掉的首要原因，不是框架问题，而是浏览器根本没进入移动端渲染模式。
为什么 Bulma 在手机上直接“失效”
Bulma 是移动优先（mobile-first）框架，所有栅格、间距、字体大小都基于 max-width 媒体查询设计。但它不自带 <meta name="viewport"> —— 这个标签必须由你手动加在 HTML 的 里。没有它，iOS Safari 和 Android WebView 默认用 980px 布局视口渲染页面，Bulma 的 @media (max-width: 768px) 一条都不会触发，.column.is-6 变成等宽堆叠、.navbar 折行错位、字体小得看不清，全是表象，根子就在这里。
常见错误现象：
- 真机上看页面被整体缩小，需双指放大才能阅读
- DevTools 里切 iPhone 模式正常，但微信或 Safari 打开就是错位
-
document.documentElement.clientWidth返回980而不是设备逻辑宽度（如390）
如何验证并修复 viewport 配置
打开网页源码，检查 最顶部是否唯一存在如下标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
必须满足这三点：
- 位置：紧贴
开始，前面不能有 JS、注释、模板变量（Next.js/Nuxt 用户要查最终 HTML，别信 SSR 渲染前的代码） - 唯一性：不能重复出现，后写的会覆盖前写的；CMS 或主题常偷偷注入一个，你又手写一个，结果互相打架
- 内容：禁用
width=320、user-scalable=no等硬编码值；initial-scale=1.0不可省，否则 iOS Safari 会强制缩放导致视口失真
Bulma 布局错乱还可能踩哪些坑
就算 <meta name="viewport"> 正确，以下问题也会让 Bulma 表现异常：
- CSS 加载顺序错误：Bulma CSS 必须在自定义样式之前引入，否则你的
.container { width: 1200px }会直接压垮 Bulma 的响应式容器 - 误用
max-device-width：Bulma 全部基于max-width，而max-device-width在现代 Safari 中已失效，写了也白写 - 父容器触发了 BFC 但未重置：比如你给 Bulma 的
.columns外层加了overflow: hidden，会导致子.column的 flex 布局计算异常 - JS 动态插入 viewport：用
document.write()或innerHTML +=添加，Safari 不认，必须是初始 HTML 解析时就存在
真机调试时最该盯住的两个值
打开 Safari Web Inspector（macOS + iOS 配对）或 Chrome 远程调试，在 Console 里输入：
console.log(document.documentElement.clientWidth, window.innerWidth)
如果两者都接近设备逻辑宽度（如 iPhone 14 Pro 是 390），说明 viewport 生效；如果显示 980，那 Bulma 再怎么写都白搭——它压根没机会运行。
复杂点在于：viewport 不是“有就行”，它和 Bulma 的断点耦合极深。比如你改了 initial-scale=0.5，视口宽度翻倍，原本 @media (max-width: 768px) 就得调成 1536px 才匹配，这种隐式依赖最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
