简介：这套企业网站源码基于HTML5技术构建，定位为中小企业及个人开发者提供简洁大气的门户模板，可用于快速搭建形象展示、产品宣传与信息发布类站点，也适合前端学习者分析布局与交互实现。压缩包共2648个文件，大小34.15MB，内含php动态页面、html/htm静态页面、js脚本、css样式表，以及jpg、png、gif等图片素材和inc配置文件，可覆盖整站前后端主要资源，目录结构清晰，便于二次开发或直接部署。资源已有647人学习下载，具备一定参考热度。源码在传统企业站基础功能上融入了响应式布局和HTML5新特性，包含产品展示、新闻模块、表单交互等典型组件，通过学习可掌握企业网站的信息架构与视觉设计思路，替换文字图片即可生成正式站点，实用性较强。
1. 简单大气企业网站h5源码：先搞懂它是哪种产物，再决定改还是重建
客户丢来一句“做个简单大气的企业网站”，预算不高、周期不长，手机电脑都得能看。所谓h5源码企业网站，就是用HTML5写的响应式静态站，结构清楚、视觉干净，拿到手改公司名、电话、产品图就能上线。它适合三类人：第一次接企业站外包的前端、想自己维护官网的运营、想省建站平台年费的技术负责人。这类源码不挂数据库，是纯静态文件，没有后台注入那类隐患（前提是来源干净）。下面按交付顺序讲怎么挑、怎么改、怎么部署，坑也一起点了。
2. 挑企业网站源码看什么：把“大气”翻译成可判定的技术指标
源码建站和从零开发的最大区别，不是写代码多不多，而是你会不会筛。市面上的企业网站h5源码，合格品和练习稿差距极大，我拿到压缩包从来不先开demo页面，而是解压看目录、打开HTML看头部、翻CSS找变量。这三件事做完，就能砍掉七成不合格的货。选型这件事所有人都容易忽略，恰恰它是后面改版和部署最大的成本来源——挑错一套模板，改的时间比写新的还长。
2.1 把源码目录铺开看：h5文件可视化的第一步是读懂结构
解压后第一件事，把目录铺开看。常见的做法是在文件管理器里直接展开，不过我更喜欢用终端，一次性拿到完整树形。一个合格的企业站，顶层目录通常长这样：
company-site/ ├── index.html # 首页 ├── about.html # 关于我们 ├── product.html # 产品中心 ├── news.html # 新闻动态 ├── contact.html # 联系我们 ├── css/ │ ├── style.css # 全局样式 │ └── responsive.css # 响应式适配 ├── js/ │ └── main.js # 导航/轮播等交互 ├── images/ │ ├── banner/ # 首屏大图 │ ├── products/ # 产品图 │ └── bg/ # 背景素材 └── favicon.ico看目录要抓住三个信号。一是页面数量在5到10个之间，说明这是正经多页站，而不是拿单页活动页冒充官网；单页站做活动行，做企业形象页后期加内容很痛苦。二是css目录里有没有独立的响应式文件，或者至少能看到media query的痕迹，没有响应式文件的源码可以直接排除，别信“自适应”三个字的描述。三是images目录有没有按用途分文件夹，这决定你后面换图时是半小时还是半天。
这一步相当于做了一次最朴素的h5文件可视化——不需要任何工具，目录本身就是图纸。我还会顺带解释为什么会选“源码”而不是建站平台。平台拖拽确实快，但每月交租金，域名和内容都绑在人家那里；纯源码是一次性资产，传到自己服务器之后，这东西永远是你的。对应的代价是部署和环境问题得自己处理，也就是第四章要讲的流程。
2.2 “简单大气”不是玄学：首屏、配色、字体、栅格四条硬指标
很多模板描述里写着“简单大气”，实际打开却是满屏动画加彩色渐变。我后来把“大气”拆成四条能拿尺子量的指标，不管自己写还是给别人验收，都有了统一标准。
第一条，首屏信息密度低。首屏指的是一打开页面不需要滚动就能看到的区域，这上面只放三样东西：公司名字、一句能听懂的业务说明、一个行动按钮。凡是首屏堆了五段文案、两个轮播、三排按钮的，都和“大气”无关。第二条，主色不超过两个，剩下的交给灰阶。商业站不需要五彩斑斓，一个深色主色加一个辅色足够，任何地方出现第三种高明度颜色，马上删。第三条，字体层级要分明。中文企业站的稳妥做法是正文用14到16像素、行高1.6左右的系统字体，标题用一款稍微厚重的黑体，英文和数字统一用同一款无衬线字体，一页出现三种字体是最丑的。
第四条是栅格感。大气不是内容少，而是布局能看出列和对齐。服务列表要么三列要么四列，卡片间距一致，图片比例一致；做不到这条，再好的文案也显杂乱。把这四条做成检查表拿来筛源码，能省掉大量来回沟通。模板里常见的一段CSS变量，是我先看的东西：
:root { --primary: #1a56db; /* 主色，按钮、链接、标题强调 */ --primary-dark: #163d8a; /* 悬停/按下时的加深色 */ --text-main: #333; /* 正文 */ --text-secondary: #666; /* 次要说明文字 */ --bg-light: #f8f9fa; /* 浅灰区块背景 */ --spacing-section: 96px; /* 大区块上下留白 */ }这段代码的逻辑是把颜色和间距抽成变量，改版只动一处，全站跟着变。参数上我重点看--spacing-section，企业站“大气”与否，这个值影响最大：96像素的区块间距和40像素的间距，视觉气质完全不同。--primary-dark容易被忽略，但按钮悬停必须有个更深的颜色，否则用户鼠标放上去没反馈。看源码时如果这组变量存在，后面改配色就是十分钟的事；如果颜色散落在各CSS文件里，就要做好逐个翻的准备了。
2.3 把首页拆成板块：企业站最少要有这七个结构
挑完目录和样式，我会快速读一遍首页HTML，在心里画出板块结构。企业网站的信息架构经过这么多年已经收敛成一套固定套路，不是创新的时候，老老实实按下面的骨架写，客户一定看着眼熟：
<header class="header"> <div class="logo">公司名 | LOGO</div> <nav class="nav">首页 关于我们 产品中心 新闻动态 联系我们</nav> </header> <section class="hero"> <h1>一句话说清你是做什么的</h1> <p>一句支撑性的副标语，给客户联系你的理由</p> <a class="btn" href="contact.html">联系我们</a> </section> <section class="about"> <h2>关于我们</h2> <p>公司成立年限、核心能力、服务过哪些行业，三段以内</p> </section> <section class="services"> <h2>核心产品 / 服务</h2> <!-- 三到四个卡片，图 + 标题 + 一句话 --> </section> <section class="cases"> <h2>案例或数据</h2> <!-- 用数字或案例图证明不是空壳公司 --> </section> <section class="news"> <h2>新闻动态</h2> <!-- 三条带日期的动态，证明公司在运转 --> </section> <footer class="footer"> 地址 / 电话 / 邮箱 / ICP备案号 </footer>这段骨架对应的信息目的很清楚：导航解决“你是谁、能去哪”，首屏解决“你是做什么的、为什么继续看”，关于我们解决“凭什么信你”，产品服务解决“能买什么”，案例数据是补充信任状，新闻动态告诉访客公司还活着，页脚承接所有联系信息。七个板块一个都不能少，但顺序可以按行业微调，工厂站把产品提到关于我们前面更合理。
这里顺便说一句，别把直播页那套前端h5的交互习惯搬来官网。直播页的诉求是短时间留人做转化，可以满屏弹窗、倒计时、飘浮按钮；企业官网的诉求是建立信任，任何让访客觉得“这是广告页”的设计都在伤害转化。改源码的时候守住这套骨架，比追求花哨重要得多。
3. 把模板改成自己的企业站：配色、信息、图片三处最出效果
选好源码只是刚开始，接下来的改版才决定成品像不像“公司官网”。很多人拿到模板就开始一页页改文字，改到一半发现颜色不对、图片不统一，回头重新来。我现在的顺序是固定的：先定配色，再集中替换公司信息，最后统一处理图片。这个顺序保证每步都是小改动，随时可以中途停下来交付。
3.1 改配色：有CSS变量十分钟，没变量就搜索替换
改配色先确认模板里有没有CSS变量。有的话改:root就行，前面已经展示过。没有变量的模板，最常见的是用全局搜索找主色的应用位置，把button、a、.btn、.active逐个替换。替换时最容易漏的不是按钮，而是表单focus边框、轮播指示点、面包屑文字颜色。我一般会把主色单独摘出来，把深色和浅色两个变体也一并生成，再配合搜索整段色值，因为不同CSS写法可能是简写形式。
从零定配色时，没有设计师的我一般从LOGO下手。用图片编辑软件的吸管取LOGO主色，然后打开HSL面板，色相固定，亮度往亮处调15%到20%得到浅色，往暗处调15%到20%得到深色。这样一套主色、明色、暗色就齐了，永远在同一色系里，不会出现“蓝中带紫”的违和感。一段典型的改色结果长这样：
/* 原模板的颜色 */ :root { --primary: #0d6efd; --primary-dark: #0a58ca; } /* 改成贴合公司LOGO的深蓝 */ :root { --primary: #0b2545; --primary-dark: #081c36; --primary-light: #2d5f8a; --bg-opacity: rgba(11, 37, 69, 0.06); /* 浅色底纹 */ }这段代码的逻辑是把品牌整条色阶建起来，后续所有“同色系”的用法都不需要临场发挥。参数上容易忽略两点：一是--bg-opacity这类透明底色，能让浅色区块透出背景纹理，比直接写死浅灰更耐看；二是改动后必须每个页面过一遍按钮悬停态，很多模板的hover色写在具体规则里并不用变量，这种情况只能单独处理。
3.2 公司信息集中管理：不要在每个HTML里手填电话
改完颜色，最耗时的其实是公司信息。企业站最多的是“有限公司”，电话、地址、邮箱在五个页面里每页都有一份，手动改完首页改内页，漏一处客户就找上门。我为这个吃过亏，现在的做法是把公司信息集中到一处替换。模板如果本身支持公共配置就直接填，不支持就写个简单的Python脚本统一替换：
# -*- coding: utf-8 -*- import re from pathlib import Path OLD = "某某实业有限公司" # 模板里的占位公司名 NEW = "成都云图信息技术有限公司" for file_path in Path(".").rglob("*.html"): text = file_path.read_text(encoding="utf-8") new_text = re.sub(OLD, NEW, text) if new_text != text: file_path.write_text(new_text, encoding="utf-8") print(f"已更新: {file_path}")这段脚本的逻辑是递归扫描当前目录所有HTML，把匹配到的旧公司名整体替换。参数上要注意编码统一写utf-8，否则Windows下可能乱码；替换范围故意限定在“公司名”这种唯一性足够强的串上，而不是“公司”这种普通词。如果模板里只有“您的公司名称”这类占位符，把OLD改成占位串即可。跑完后再全文搜索一遍旧词，确认没有漏网之鱼，因为产品描述里万一也带了这个词，批量替换后就是错文案。
电话、邮箱建议用同样的思路过一遍，不一定都写脚本，但要做一张清单一个页面一个页面对照，避免首页四个电话改完了，产品页还留旧号码。维护细节上，以后要改电话不要只改数字，找到footer附近的注释块一起更新，后面接手的人才知道去哪改，这也是给自己留后路。
3.3 换图片：先压缩再上线，别让一张图毁掉整个站
企业站显得土的很大原因不是配色，是图片。模板自带的高清大图换成客户提供的小图后，比例全乱、拉伸变形，“大气”感直接崩掉。我处理图片有三条规则：第一，图片宽度不超过1920像素，首屏图控制在1600像素以内；第二，一律转jpg或webp，不用bmp和未压缩png；第三，产品图统一尺寸，比如一律750乘560。下面是一个常用的Python预处理脚本，在images_raw目录下执行：
from PIL import Image from pathlib import Path MAX_WIDTH = 1600 # 首屏大图宽度上限 QUALITY = 82 # JPEG质量，肉眼接近无损的起点 for src in Path("images_raw").glob("*.jpg"): im = Image.open(src).convert("RGB") if im.width > MAX_WIDTH: h = int(im.height * MAX_WIDTH / im.width) im = im.resize((MAX_WIDTH, h)) im.save(Path("images_web") / src.name, quality=QUALITY, optimize=True) print(f"{src.name}: {im.width}x{im.height}")这段脚本把超出宽度限制的图等比缩小，再按质量82重新编码。参数上1600是banner和全宽背景图的上限，绝大多数屏幕上看不出压缩损失；82是我试过多次的习惯值，高于85体积增长明显、画质几乎没区别，低于75在渐变背景上会出现色带。产品图不走这条路径，而是用resize统一裁到750乘560，保证三列卡片排出来严丝合缝，图片不会被浏览器拉伸。
在此基础上，给模板加上响应式图片的保险措施，用picture标签给不同屏宽提供候选：
<picture> <source media="(max-width: 768px)" srcset="images/banner/hero-mobile.jpg"> <img src="images/banner/hero.jpg" alt="公司主营业务实拍图" width="1600" height="900"> </picture>这里的逻辑是手机访问时下载更小的hero-mobile.jpg，电脑访问用原图，省流量也提速度。参数上移动端图宽度做750像素就够。img标签的width和height一定不要删，浏览器靠这两个值预留空间，否则图片加载过程中页面会上下跳动，移动端体验直接扣分。
4. 部署上线：本地验证、nginx配置、域名与证书三步走
改好的源码最终要放到服务器上。这一章不是写给大公司运维的，而是给中小企业主或外包前端看的落地路径：一台服务器、一个域名、一份静态文件，把网站对外提供服务。很多人第一次部署都卡在“本地好好的，一上服务器就白屏”这个怪圈里，其实问题不在服务器，而是没先做本地验证。
4.1 本地起一个http服务，先验证资源和路径
改完源码的第一个动作，不是双击index.html直接预览，而是在项目根目录起一个静态文件服务。原因是浏览器用file://协议打开文件时很多能力受限，某些模板的字体加载、异步请求、二维码脚本都可能异常；而且file协议下的相对路径本地能打开，换到服务器上却找不到，白耗时间。
cd company-site python3 -m http.server 8080这条命令的逻辑是启动基于当前目录的HTTP服务，监听8080端口。参数上8080只是本地端口，可以换成任意不冲突的数字。启动后浏览器访问http://localhost:8080，如果页面能正常打开且图片样式都在，说明资源路径是相对的，部署到主域名或子目录都不会出问题；如果有资源404，就是HTML里写成了绝对路径，回源码改。
这一步同时还能验证移动端。把浏览器窗口拖窄，或者直接用开发者工具响应式模式，看导航有没有折叠、图片会不会溢出。企业站第一次交付最容易翻车的场景就是这里：桌面端完美，手机上导航叠在小图上，整页宽度溢出。用python命令起的服务能被手机访问，只要手机和电脑在同一局域网，访问电脑IP加8080端口就能真机测一遍，比模拟器更接近真实效果。
4.2 nginx配置：root、index、缓存三条参数决定成败
本地验证通过后，把源码目录上传服务器。常见路径是/var/www/company-site，确认运行nginx的用户对这个目录可读。静态文件服务器里nginx最常用，配置足够简单也不容易出错。下面是我交付客户用的nginx配置骨架：
server { listen 80; server_name yourdomain.com www.yourdomain.com; root /var/www/company-site; index index.html; location / { try_files $uri $uri/ =404; } location ~* \.(css|js|png|jpe?g|gif|woff2?|svg|ico)$ { expires 7d; add_header Cache-Control "public"; } }这段配置的逻辑分三层：路由请求、静态资源缓存、错误处理。root指向源码根目录，index指定默认首页，server_name绑定域名。location /里的try_files先找真实文件，找不到再找目录，再没有就返回404；企业站是真实多页，所以用=404让不存在的页面明确报错，而不是像单页应用那样全部回退到index.html。静态资源location给图片和样式设了7天浏览器缓存，二次访问会明显更快。
参数上还有两个常被忽视的点：root路径结尾不要多写斜杠，nginx拼接时会变成双斜杠；listen 80是为后面接HTTPS证书准备的，如果服务器上还有其他站点，记得把不同域名的配置块分开，别挤在同一个server里。改完执行nginx -t检查语法，通过就systemctl reload nginx。
如果公司没有专职运维，我更愿意在服务器上装一个面板类工具管理nginx和证书，点击就能建站。技术团队可以全命令行，但给客户代维的话，面板能减少后面一半的工单。
4.3 域名解析与HTTPS：把“备案”和“证书”两件事分开处理
域名要能访问网站，关键是解析。登录域名服务商控制台，给yourdomain.com和www.yourdomain.com各加一条A记录，指向服务器IP。解析生效后几分钟到几小时不等，本地可以用nslookup确认。常见的误操作是把A记录和CNAME搞反：A记录指向IP，CNAME指向另一个域名，填反了永远解析不对。
企业网站现在必须配HTTPS，我一般用certbot自动签发并修改nginx配置：
sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com这两条命令的逻辑是安装客户端、用nginx插件自动完成证书签发和配置注入。参数上-d后面带上两个域名，把带www和不带www的访问都覆盖，否则只签一个域名时，另一个域名访问会报证书错误。签发过程需要80端口可以访问，nginx没启动的话certbot无法完成验证。
国内部署还有一个绕不开的话题是ICP备案。服务器和域名都在国内的话，域名解析到国内服务器前必须完成备案，周期按工作日算，要预留时间。这段等待期网站是访问不了的，所以我的交付计划里备案启动放在项目第一天，而不是等网站做好再申请。
注意：备案周期按20个工作日预留比较稳妥，解析动作要等备案通过后再执行。
对比一下带后台的企业网站管理系统，如果内容一周要更新三次以上，或老板以后要频繁改产品价格，纯静态源码维护成本反而高，带后台方案更值。如果一年到头只改一次电话，静态源码就是最佳选择。部署前想清楚这个前提，后面不容易后悔。
5. 企业网站h5源码避坑：5条真实的排错记录和对应修法
静态站点看起来简单，踩的坑却一个不少。下面五条是我在企业站交付和维护中反复遇到的现象和处理办法，按“现象、原因、解决”写，可以直接对照排查。说是血泪经验一点不过分，其中任何一条都够网站掉一次链子。
5.1 手机上打开页面，文字小得像蚂蚁，宽度还能横向拖
现象：电脑上一切正常，手机打开，文字变小，页面能横向滑动，排版像放大镜下的报纸。
原因：缺viewport标签。html头里没有设置可视区域，手机浏览器默认按980像素宽渲染页面再缩放，所以全变小了。
解决：在head区补一行，放在title之前：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这行的作用是把布局宽度固定为设备宽度，并让初始缩放比例为1。参数width=device-width是核心，少了它手机永远按桌面宽解释。某些老模板还有min-width: 1200px写在body上，这时光加viewport不够，要去CSS删掉最小宽度限制。验证方法简单：手机打开，页面宽度等于屏幕宽，不出现横向滚动条就算过。
5.2 改了颜色和样式，刷新毫无变化，客户以为你没干活
现象：修改style.css并上传，浏览器刷新，页面还是旧样式。
原因：浏览器缓存。第四章里静态资源设了7天缓存，过期前浏览器不会重新下载CSS。
解决：改完给样式引用加版本号，强迫浏览器重新请求：
<link rel="stylesheet" href="css/style.css?v=20250520">逻辑是URL带不同查询参数时浏览器视为新资源，重新加载。参数v建议按日期写，简单点每次+1也行。部署前把v改成当天日期，客户刷新就能看到新版。企业微信里打开的页面还要注意它自己有内置缓存，类似清h5缓存工具的操作，本质上就是给URL加参数再访问，或者彻底关闭重进。这个坑在微信环境里尤其隐蔽，普通浏览器清一次缓存就行，微信内嵌浏览器要彻底杀掉进程才干净。
5.3 图片加载很慢，首屏白了好一会儿，客户直接关页面
现象：网速一般的情况下，首屏图半天出不来，文字先显示，图片位置空着。
原因：图片体积太大。客户给的实拍图经常单张三五MB，原样传上去加载自然慢。
解决：回到第三章的压缩脚本处理一遍，同时给首屏图片加width和height占位。模板里图片没写宽高时，浏览器在加载完成前不知道预留多少空间，布局每秒都在跳，观感极差。首屏以外的图片再加loading="lazy"，访问首页不会一口气下载整页所有图，移动端流量和速度都受益。做完打开Network面板看一遍，图片单张控制在200KB以内，这个问题基本解决。
5.4 部署后访问白屏或样式全丢，查看代码路径却都对
现象：本地好好的，传服务器后打开是白底，没有CSS没有图，刷新也没用。
原因：多半是资源没传完整，或文件名大小写不一致。Linux服务器严格区分大小写，本地Windows不区分，模板里写HERO.JPG，服务器上文件叫hero.jpg，本地能开，服务器上必404。
解决：上传后用curl逐个检查资源：
curl -I http://yourdomain.com/css/style.css-I参数只取响应头不下载正文，返回200说明文件在，404说明路径或大小写有问题。把HTML引用的路径和服务器实际文件名对照一遍。另一个白屏来源是nginx的root配错路径——403是权限问题，404是路径问题，200但样式没生效要看MIME类型，静态服务器上.css、.js的MIME配错会被浏览器拒绝渲染。顺带提醒，企业网站上如果放了微信二维码，h5图片在微信里能被长按识别的前提是页面走HTTPS完整域名路径，不能用IP访问，这条部署时一并确认。
5.5 免费模板里藏着外链，网站被挂上不明跳转
现象：页面打开正常，但部分手机用户反映会偶尔跳转，或搜索引擎提示站点有不可见链接。
原因：免费下载的模板，头部或JS里藏了作者推广位，常见的是隐藏iframe、不可见链接、或JS动态写入内容。这类隐藏外链会让企业站被搜索引擎判定作弊，轻则降权重则拉黑。
解决：收到源码后立即清扫。用编辑器全局搜索href="http"，对比所有外链域名，不属于自己的全部删除；再打开浏览器开发者工具切到Network面板，刷新页面，观察有没有发往陌生域名的请求。JS里混淆过的代码、动态创建iframe的片段，直接找到对应文件删掉功能。
这类问题的关键在来源。我后来收模板只认两种：付费设计方给的原版源码，或者内容开放、被大量使用过的知名模板。那些打包成“免费企业h5源码大全”的资源包里混后门和暗链的比例不低，用之前至少花半小时做这两步检查。网络安全这事，出了事再处理就没有后悔药了。
6. 交付前的三项验证：性能体检、SEO信息、访问统计
网站部署上线只是开始，真正决定客户满意度的，是你有没有替他想到后面三个问题：打开快不快、搜索找不找得到、来了多少人。这一章给三项当天就能完成的验证动作，做完再交付，比任何口头解释都有说服力。
6.1 用Lighthouse做一次性能体检
Chrome按F12进入开发者工具，切到Lighthouse面板，选移动端跑一次审计，重点看Performance和SEO两个分数。性能至少70分以上，不合格先查三样：图片有没有压缩、有没有引入用不上的大JS库、字体是不是多加载了一套没用的字重。SEO分数低，多数是页面缺title或meta描述。把报告截图发给客户，比说一百句“再做做优化”都管用。
6.2 title与description：每个页面一套，别全程复制
企业站要被搜索引擎收录，每个页面该有独立的标题和描述。首页写公司全称加核心业务，产品页写具体产品名，新闻页写新闻标题。模板经常所有页共用一个title，改版时顺手补齐：
<title>成都云图信息技术有限公司 - 企业官网</title> <meta name="description" content="成都云图信息技术有限公司专注企业信息化建设，提供官网定制、小程序开发与运维服务。">标题控制在60个字符内，描述100字左右，各自只写一句话，把地区和业务写清楚。sitemap.xml提交到站长平台，是让新站更快被爬虫发现的最直接手段，多页企业站手写十分钟能完成，提交后等几天收录。
6.3 埋一个访问统计，数据比感觉可靠
上线不放统计代码等于闭着眼睛做网站。用现成平台注册站点ID，按文档把脚本放到每个页面的footer前，三分钟完成。如果不想依赖第三方，也可以用一段极简的自建采集：
<script> // 页面访问时上报路径和来源，替代复杂统计工具的最小实现 (function () { var data = { page: location.pathname + location.search, referrer: document.referrer || "", // 来源为空表示直接访问 time: new Date().toISOString() }; navigator.sendBeacon("/track/api?" + new URLSearchParams(data)); })(); </script>这段代码的逻辑是页面加载时用sendBeacon上报一条访问记录，sendBeacon的优点是页面关闭时数据也能发出去。参数page记录访问路径，referrer记录来源，time记录时间。注意它需要后端有个接收上报的接口，纯静态站直接用成熟统计平台更省心，这段只给想自控数据的人做起点。
我交付网站有个改不掉的习惯：手机连同一WiFi把全站从头点到尾，开流量再点一遍，然后把Lighthouse截图和统计后台账号一起交给客户。三年前我交过一套没加viewport的站，客户当着我面打开手机，字大得吓人，现场改完才下台。现在把这套动作写出来，希望帮到你，少一次当场翻车。
本文还有配套的精品资源，点击获取
