一、先分清两件事

页面在本地能打开，只代表文件正常，距离"别人用手机访问到"还差两个关键环节：

• 发布 解决别人怎么通过域名访问到它；
• 适配 解决页面在窄屏上是否可读、可点、可操作。

原文讲的"隐藏法"不是粗暴删内容，而是在手机屏幕上重新安排模块优先级，隐藏次要信息，让核心内容保持清晰。

二、发布前要准备的三样东西

1. 确认页面类型：只有 HTML、CSS、JS 和图片的话，Nginx、Apache 或对象存储静态托管就够了；如果依赖后端接口，还需要对应服务。
2. 域名与解析：域名完成实名认证和解析，把 A 记录指向服务器 IPv4 地址，或把 CNAME 指向 CDN 域名。
3. HTTPS 证书：手机端浏览器和微信内置浏览器对 HTTPS 有强制要求，建议发布前申请证书（可通过 certbot 或云平台一键部署），避免访问时出现安全提示。

三、上传时的4个硬性要求

• 首页必须命名为 index.html，多数 Web 服务器默认按这个文件名响应目录请求。
• 资源引用优先用相对路径，例如 css/style.css、js/app.js。本地写成 C:\Users\me\site\css\style.css 这种形式，上传到 Linux 服务器后路径完全失效——反斜杠只存在于 Windows 本地路径，发布环境用斜杠分隔目录。
• 对象存储托管要在控制台开启静态网站功能，并把默认首页设为 index.html。
• 上传后先用桌面浏览器访问一次，确认 CSS 和 JS 都返回 200。

排错口诀：404 通常是路径写错，403 通常是目录权限或默认首页没设置。

四、隐藏法的核心机制

第一步：加 viewport 声明。 在 HTML 的 <head> 里加入 viewport 设置。没有这行，手机浏览器会用默认的 980 像素视口渲染，页面整体缩小，文字和按钮都难点。

第二步：用媒体查询实现隐藏。 隐藏对象通常是侧栏、广告位、装饰性图片和次要操作。比如桌面端是"左导航 + 右内容"两栏布局，手机端隐藏左导航、改为顶部汉堡按钮，点击再展开，屏幕宽度被主内容充分利用。

第三步：字号与间距用相对单位。 给根元素设 rem 基准，小屏适当减小根字号，标题和正文按比例缩放。

第四步：区分两种"隐藏"。

隐藏模块多数场景应选 display:none，否则页面会出现无意义空白。

五、发布后最常见的3个失效点

• 漏写 viewport：手机以 980 像素宽度渲染，整页压缩到看不清。
• 写死固定宽度：容器写 width: 1200px，小屏必然出现横向滚动条。应改成 max-width 配合 width: 100%。
• 盒模型没统一：默认 box-sizing: content-box 下，padding 和 border 会撑大元素实际宽度，两个 50% 宽度的盒子并排就溢出。样式开头统一设 box-sizing: border-box 即可。

六、上线后的验证清单

• 必须上真机：重点检查微信内置浏览器、Safari 和 Chrome。微信内置浏览器缓存顽固，必要时在链接后追加版本参数。
• 开发者工具设备模拟器定位溢出模块，再切真机确认；横竖屏都要测，因为断点可能刚好落在临界值。
• 点击区域不要小于 44×44 像素，导航链接和按钮最常出问题。
• 图片走 srcset，让浏览器按屏幕宽度选不同尺寸，配合 gzip 与缓存减少手机流量消耗。

隐藏法同样适用于表单页、活动落地页和移动端管理后台。判断标准只有一条：小屏上用户最可能做的操作要留在主界面，说明性文字、次要入口收进二级页面或折叠区域。每次更新后重跑一遍检查清单，别等出问题再回头找。