HTML5页面制作完成，只代表本地文件可以打开，距离真正上线并被手机用户访问还有两个关键环节：发布和移动端适配。发布解决的是别人怎么通过域名访问到页面，适配解决的是页面在窄屏设备上是否可读、可点、可操作。本文介绍的隐藏法，并不是粗暴地把内容删掉，而是在手机屏幕上重新安排模块优先级，隐藏次要信息，让核心内容保持清晰。先看发布流程，再拆解隐藏法的具体实现。

一、发布HTML5网页需要准备哪些东西

发布HTML5网页前，先确认页面是纯静态文件还是依赖后端接口。如果只有HTML、CSS、JS和图片，使用Nginx、Apache或对象存储静态网站托管就能完成。域名需要完成实名认证和解析，把A记录指向服务器IPv4地址，或把CNAME指向CDN域名。现在手机端浏览器和微信内置浏览器对HTTPS有强制要求，因此建议发布前申请证书，可以通过certbot或云平台一键部署，避免访问时出现安全提示。

文件上传后，首页命名必须为index.html，因为多数Web服务器默认按这个文件名响应目录请求。资源引用优先使用相对路径，例如css/style.css、js/app.js。如果本地写的是C:\Users\me\site\css\style.css，上传到Linux服务器后路径完全失效。反斜杠只存在于Windows本地路径，发布环境通常使用斜杠分隔目录。下面是一个常见上传示例：

# 将本地 dist 目录上传到服务器 Nginx 站点根目录
scp -r dist/* root@your-server:/var/www/html/
# 确认首页文件存在
ls -l /var/www/html/index.html

如果使用对象存储静态托管，需要在控制台开启静态网站功能，并设置默认首页为index.html。上传后先使用桌面浏览器访问一次，确认CSS和JS都返回200。状态码404通常意味着路径写错，403通常是目录权限或默认首页未设置。将这些问题解决后，再进入手机适配环节。

二、隐藏法适配手机的核心机制

移动端适配的第一步是在HTML的<head>区域加入viewport声明。没有这行代码，手机浏览器会使用默认的980像素视口来渲染，页面会整体缩小，文字和按钮都难以点按。正确的写法如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

有了viewport之后，就可以用媒体查询实现隐藏法。这里的隐藏不是把主要内容用display:none全部移除，而是针对小屏隐藏侧栏、广告位、装饰性图片和次要操作。比如桌面端是左导航加右内容的两栏布局，手机端可以隐藏左导航，改为顶部汉堡按钮，点击后再展开。这样屏幕宽度被主内容充分利用，用户不需要左右滑动。

基础样式先让图片和表格具备最大宽度约束，防止撑破容器：

img, video, canvas, table {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .sidebar,
  .banner-ad,
  .desktop-only {
    display: none;
  }
  .main-content {
    width: 100%;
    padding: 0 12px;
  }
  .nav-list {
    display: flex;
    flex-wrap: wrap;
  }
}

除了隐藏模块，字号和间距也要使用相对单位。固定像素在桌面端合理，在手机上可能过大或过小。可以给根元素设置rem基准，再根据视口调整。小屏下适当减小根字号，标题和正文会按比例缩放：

:root {
  --font-base: 16px;
}
html {
  font-size: var(--font-base);
}
@media (max-width: 375px) {
  html {
    font-size: 14px;
  }
  .card-title {
    font-size: 1rem;
  }
  .desc-text {
    font-size: 0.875rem;
  }
}

display:none和visibility:hidden的区别也容易混淆。前者会让元素脱离文档流，不占位；后者只是不可见，但原来的空间仍然保留。移动端隐藏模块时，多数场景应使用display:none，否则页面会出现无意义的空白。对于需要保留占位以便切换动画的组件，可以临时使用visibility配合opacity。

三、发布后常见的适配失效与排查

很多适配问题在桌面浏览器里并不明显，一到真机上就会暴露。最常见的是漏写viewport，手机以980像素宽度渲染，整个页面被压缩到看不清。还有开发者习惯给容器写固定宽度，例如width: 1200px，在小屏上必然产生横向滚动条。解决方式是把固定宽度改成max-width，并配合width: 100%。

另一个高频问题是盒模型。默认情况下box-sizing: content-box会让padding和border增加元素实际宽度，导致两个50%宽度的盒子并排时溢出。建议在样式开头统一设置：

*,
*::before,
*::after {
  box-sizing: border-box;
}

发布后需要在真机上验证。可以用手机直接访问公网地址，重点检查微信内置浏览器、Safari和Chrome。微信内置浏览器的缓存比较顽固，必要时在链接后追加版本参数。控制台里可以用下面代码快速判断视口宽度和触摸设备：

// 查看当前视口宽度
console.log('当前视口宽度：', window.innerWidth);
// 判断是否为触摸设备
if ('ontouchstart' in window) {
  document.documentElement.classList.add('touch-mode');
}

如果发现某个模块在小屏上仍然溢出，可以先用浏览器开发者工具的设备模拟器定位，再切到真机确认。横竖屏切换也需要测试，因为宽度不同，断点可能刚好落在临界值。点击目标过小的问题常见于导航链接和按钮，手机端建议最小点击区域不小于44乘44像素。

四、隐藏法之外的增强手段与发布优化

隐藏法能解决大部分移动端布局问题，但图片尺寸如果仍使用桌面大图，加载会变慢。可以使用srcset让浏览器根据屏幕宽度选择不同尺寸的图片：

<img src="images/photo-small.jpg" 
     srcset="images/photo-small.jpg 480w, images/photo-large.jpg 1080w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="示例图片">

发布环节还可以开启gzip压缩和缓存，减少手机端流量消耗。Nginx配置片段如下：

server {
    listen 443 ssl;
    server_name www.ipipp.com;
    root /var/www/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;
}

隐藏法不仅适用于内容型页面，也适合表单页、活动落地页和移动端管理后台。关键是把用户在小屏上最可能使用的操作保留下来，把说明性文字、次要入口和装饰内容收进二级页面或折叠区域。发布与适配不是一次性的工作，每次更新后都应该重新走一遍检查流程，确保移动端没有因为新增模块而出现溢出或遮挡。完成这些步骤后，HTML5网页就能同时满足公网访问和手机自动适配的要求。