说实话，整理这份 H5、CSS 的八股文，是我面了好几轮前端之后才痛下决心做的事。以前总觉得背面试题没意思，但真到写项目的时候才发现，很多问题不是 "会不会写" 的问题，而是 "知不知道为什么要这么写" 的问题。比如 flex 布局的 flex:1 到底是怎么算出来的，CSS 选择器优先级为什么不是简单的"类大于标签"，还有 H5 页面在微信里跟小程序、App 之间到底是怎么通信的。这些问题不搞透，写出来的页面要么是看着能跑但一改就崩，要么是换了个环境就各种兼容性报错。
这份笔记，我把布局、选择器、视觉效果、微信生态、多端适配这几个高频方向都过了一遍。不管你是准备面试，还是正在做 H5 项目被某个兼容性问题卡住，应该都能在里面找到能直接抄作业的答案。
1. 布局基石：Flex 与 Grid，怎么答才显得不背题
布局这块是 H5、CSS 面试里的重头戏，十个问题里至少有五个跟 flex 有关。很多人会把属性背得滚瓜烂熟，但一被追问"flex:1 到底什么意思"就卡壳。这其实暴露了一个问题：只记住了答案，没理解设计思路。
1.1 Flex 面试必备：容器与项目的八股清单
先过一遍最基础的：开启 flex 布局后，容器上有六个常用属性，项目上有六个常用属性。这些是死知识，必须记住，但更重要的是理解它们之间的协作关系。
容器属性里，flex-direction 决定主轴方向，row 和 column 是最常用的两种。flex-wrap 控制换行，默认 nowrap 会导致项目被压缩。justify-content 管主轴对齐，align-items 管交叉轴对齐，align-content 管多行之间的分配。项目属性里，flex-grow 是放大比例，flex-shrink 是缩小比例，flex-basis 是项目在主轴上的初始尺寸。
面试里最经典的追问是："flex:1 是什么？" 很多人会答"等分剩余空间"，这个答案只对了一半。准确地说，flex:1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写。注意那个 flex-basis:0%，它意味着项目的初始尺寸被设为 0，所以剩余空间会被完整地分配给这个项目。如果写成 flex-grow:1 但 flex-basis 默认是 auto，那初始尺寸就是内容宽度，分配效果会跟 flex:1 有明显差异。
还有一个很容易踩的坑：flex-basis 和 width 同时设置时，flex-basis 优先。这个特性在很多兼容性 bug 里出现过。比如移动端列表项，你明明设了 width:100px，但父容器是 flex 布局且项目有 flex-basis，最后宽度就不是 100px 了。排查的时候第一反应应该看是不是 flex-basis 覆盖了 width。
实际项目里我比较推荐用原子化的思路去封装 flex 工具类，比如.flex { display:flex }、.flex-1 { flex:1 }、.items-center { align-items:center }。这不是让你去用某个特定的原子化 CSS 框架，而是说把最常用、最稳定的 flex 组合提炼成类名，业务代码里就不用每处都写一长串。搜索热词里出现"原子性css"，说明大家在实践中已经意识到这个问题了：类名重复不可怕，可怕的是同一个布局语义在十个地方写了十种不同的写法。
1.2 Grid 布局：二维场景的利器，别只会用 flex
Grid 在面试里出现频率不如 flex，但一旦问到，基本就是拉开差距的题。flex 解决的是一维布局，也就是一条轴上的排列；grid 解决的是二维布局，行和列可以同时控制。
最常用的声明是display:grid，然后通过 grid-template-columns 和 grid-template-rows 定义轨道。grid-template-columns: repeat(3, 1fr)是三等分布局的标准写法，1fr 是 fr 单位，代表剩余空间的一份。很多人会问 fr 跟百分比有什么区别，区别在于 fr 是"剩余空间"的分配，而百分比是"容器总尺寸"的比例。当容器有 gap 或者固定尺寸轨道时，fr 会自动消化这些差异，而百分比经常导致溢出。
Grid 还有一个很实用的特性是 grid-template-areas，它允许你用命名的形式描述布局区域。举个例子：
.container { display: grid; grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; }这种写法在页面骨架搭建时特别直观，改布局只需要调整 ASCII 字符画，不用动 HTML 结构。但要注意 grid-template-areas 的每个单元格都要有名字，空位要用"."占位，否则整个声明无效。
关于 flex 和 grid 的选择，我的经验是：一维导航、按钮组、列表项用 flex；二维卡片墙、页面骨架、复杂表单区域用 grid。如果你在面试时能说出"flex 是从内容出发，grid 是从布局出发"这种视角，会比单纯背属性高一个档次。
1.3 高频小问题：gap、居中、底部固定与文本位置
搜索热词里有很多看起来简单但实际容易翻车的小问题，比如"css gap"、"css div适中在底部"、"怎么调整css容器里的文本位置"。这些恰恰是日常开发里出现频率最高的。
gap 属性是 CSS 布局里一个晚到但好用的特性，它同时适用于 flex、grid 和多列布局。在 grid 时代，我们用的是 grid-gap，后来统一改成了 gap，grid-gap 属于旧写法。gap 可以分别设置 row-gap 和 column-gap，比如gap: 12px 8px表示行间距 12px、列间距 8px。flex 布局里用 gap 做间距，可以避免手动给子元素加 margin 或使用相邻兄弟选择器，代码会干净很多。
"div 固定在底部"是个经典需求，不同场景有不同解法。如果 div 在内容后面，用正常文档流加 margin-top:auto 配合 flex 容器即可；如果 div 需要始终固定在视口底部，用 position:fixed 加 bottom:0 是最直接的；如果底部栏压住了内容，就需要给 body 加 padding-bottom 来留出安全高度。面试时如果被问到，答完这三种情况还能说明各自适用场景，基本就过关了。
"调整容器里的文本位置"本质上是对 line-height、text-align、vertical-align、padding 的理解。单行文本垂直居中用 line-height 等于容器高度，多行文本垂直居中用 flex 加 align-items:center，这是最常见的两种方案。文本水平位置由 text-align 控制，但要注意 text-align 作用于块级容器内的行内容，对行内元素本身没有效果。vertical-align 则是调整行内元素在行框内的垂直对齐方式，常用于图标和文字的对齐。这几个属性区分清楚，文本位置的问题就解决了一大半。
另外搜索热词里那个"css 加边框盒子不变形"，这是 box-sizing 的经典问题。默认的 content-box 下，元素宽度不含 padding 和 border，加上 border 后盒子会变大。改成box-sizing: border-box后，width 是最终占位宽度，padding 和 border 在内部消化。现在主流做法是全局设置：
* { box-sizing: border-box; }这个设置几乎是所有现代 CSS 重置方案的标配。
2. 选择器、伪元素与变量：最刁钻的八股角落
选择器优先级在 CSS 八股文里地位很高，但很多人理解是错的。记得有一次面试官让我写几个选择器并排优先级，我写了 "类选择器大于元素选择器"，就被追问"那类选择器和伪类谁大"。这种题不把权重计算规则吃透，很容易露馅。
2.1 选择器优先级：别再说"类大于标签"
CSS 优先级本质上是一个四位数的比较规则：行内样式 > ID 选择器 > 类选择器、属性选择器、伪类 > 元素选择器、伪元素。!important 可以改变排序，但它是特异性外挂，一般不建议用。
有个面试官教我的记忆方式：把优先级当成一个数字，内联样式是最高位，ID 是第二位，类、属性、伪类是第三位，元素、伪元素是第四位。比如div.container .item:hover这个选择器的优先级就是 0,2,1。两个选择器比较时，从左到右逐位比较，数字大的胜出。
为什么:hover、:not、:nth-child这些伪类都比元素选择器权重高？因为它们在第三位，而元素选择器在第四位。但:not本身不计入权重，它里面的选择器才计入。比如div:not(.active)的优先级是类选择器权重加元素选择器权重，而不是伪类权重。
实际开发中，我建议尽量把选择器层级控制在两层以内，比如.card .title就足够。层级越深，优先级越复杂，代码越难覆盖。遇到要覆盖第三方组件样式的情况，优先通过添加自定义类名来提高权重，而不是无脑加 !important。项目里如果用了原子化 CSS，优先级管理更要注意，因为原子类大多是单类选择器，权重相同的情况下，后定义的类会覆盖先定义的类，这和样式表中写死一条规则是两回事。
2.2 伪元素与 CSS 变量：配合起来能玩出花
::before和::after这两个伪元素，面试必考。它们有两个硬性要求：必须设置 content 属性，哪怕值是空字符串；默认是行内元素，要设置宽高得先转成 block 或 inline-block。伪元素的经典用法包括清除浮动、绘制装饰线条、实现气泡小箭头，以及给不存在的元素补充结构。
搜索热词里有一条"css 控制伪元素变量"，这其实是在问 CSS 变量在伪元素中的使用方式。CSS 变量是继承的，父元素定义的变量，子元素和伪元素都能读取。在伪元素里使用变量的常见姿势是：
.btn { --icon-color: #ff6600; } .btn::after { color: var(--icon-color); } .btn:hover { --icon-color: #00ff88; }这种写法比在伪元素里重写一遍颜色值清晰得多。如果你想在 JS 里动态控制伪元素样式，不能用 element.style 直接操作 ::after，但可以操作 CSS 变量：element.style.setProperty('--icon-color', '#ff6600')，然后伪元素里用 var() 读取。这算是动态控制伪元素最优雅的方案。
"css hover延迟关闭"也是热词里一个很实用的技巧。很多下拉菜单在鼠标移出后立刻消失，体验很差。要让它延迟消失，最基础的做法是使用 transition 加 transition-delay：
.dropdown-content { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s linear 0.2s; } .nav-item:hover .dropdown-content { opacity: 1; visibility: visible; transition-delay: 0s; }这个方案的好处是显示时无延迟，消失时延迟 0.2 秒，给用户一个容错窗口。另一种方案是用 animation 的延迟配合 forwards 填充模式，但那样控制逻辑更绕，我更喜欢 transition-delay。如果下拉菜单有二级导航，最好在菜单项和目标菜单之间留出一条没有 gap 的"桥"，把鼠标移出到进入菜单的路径连起来，体验会顺滑很多。
还要提一下 Vue 里的深度选择器问题，搜索热词里的"css deep方法"说的就是这个。在 scoped 样式中，父组件的样式默认不会作用到子组件内部，这时需要深度选择器来穿透。不同时期、不同工具链有不同写法：/deep/、::v-deep、>>>、:deep()。Vue 3 推荐用:deep(.child-class)，Vue 2 里常用::v-deep或/deep/。这一点在面试中经常作为"是否真的写过规模化项目"的考察点。
2.3 Mask、背景图与裁剪合成
CSS mask 在热词里出现，说明大家开始关注"图片处理之外"的视觉效果了。mask 的用法很简单，但概念比较抽象：它是一个遮罩，元素内容在遮罩的透明区域会被隐藏，在遮罩的不透明区域会被显示。常见用法是用渐变做图片淡出效果：
.fade-image { mask-image: linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }这样图片底部会平滑地消失在背景里，性能比用 rgba 渐变盖在图片上好很多。注意 mask 需要 -webkit- 前缀来兼容 Safari 和旧版 Chrome。
背景图相关的面试题也常考 background-size 的 cover 和 contain 区别。cover 是把背景图缩放到完全覆盖容器，可能被裁剪；contain 是完整显示背景图，可能留白。这在响应式 banner、头像裁剪场景里非常关键。background 简写顺序容易记混，我的记忆方式是：background: color image position / size repeat attachment origin clip，其中 position 和 size 要写成position / size，比如background: url(img.png) center / cover no-repeat。这个斜杠很多人会漏掉，漏掉之后 size 就不生效。
背景图定位还有一种常见需求：图标和文字的垂直居中对齐。用background-position: right center或者background-position: 100% 50%，可以让背景图在容器内垂直居中。这比用绝对定位去摆放背景图简洁很多。
3. 文字与视觉：渐变、竖排、省略号与炫光效果
文字处理是 H5 页面里的高频需求，也是面试里很容易被考察细节的环节。从字体渐变到文字竖排，从单行省略到金光闪闪的装饰效果，每个点背后都有对应的 CSS 机制。
3.1 字体渐变：background-clip 的经典组合
"css 字体渐变"和"css 字体"这些热词出现的背后，是 H5 视觉设计里越来越常见的渐变文字需求。实现文字渐变，核心是 background-clip: text 配合 color: transparent。
.gradient-text { background: linear-gradient(135deg, #ff6a00, #ffb700); -webkit-background-clip: text; background-clip: text; color: transparent; }原理其实不复杂：background 绘制到文字的形状上，然后把文字本身变成透明，背景渐变就从文字里透出来。注意 background-clip: text 需要 -webkit- 前缀来兼容部分浏览器，而且设置 color: transparent 时，如果 background 加载失败或者不支持 background-clip，文字会直接消失。稳妥的做法是加一个 @supports 判断：
@supports (background-clip: text) or (-webkit-background-clip: text) { .gradient-text { background: linear-gradient(...); -webkit-background-clip: text; color: transparent; } }这样不支持的浏览器会回退到正常文字颜色，而不是变成透明文字。这属于经验问题，面试里如果答出来，会显得你不是只会写 demo。
3.2 文字竖排、单行省略和盒子变形
"css文字竖着排列"是个不太起眼但问的人不少的问题。实现竖排最标准的是 writing-mode 属性：
.vertical-text { writing-mode: vertical-rl; }vertical-rl 表示文字从上到下排列、从右往左换行，符合中文传统排版的习惯。如果想控制单字间距，配合 letter-spacing 调整就行。这个属性还可以用在 table 的表头文字、侧边栏标签等场景。
"css 单行显示，超出点点点"考察的是文本溢出处理。单行省略是三件套：
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }三行缺一不可：overflow:hidden 让超出的内容隐藏，white-space:nowrap 阻止换行，text-overflow:ellipsis 显示省略号。如果要两行或三行省略，用 -webkit-line-clamp：
.multi-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }这个写法要注意 display:-webkit-box 会和 flex 的 display 冲突，如果元素本身是 flex 容器，得在外面套一层。
"css 加边框盒子不变形"在 3.2 里提过了，本质是 box-sizing:border-box。实际项目里，边框、内边距导致的宽度溢出是最常见的布局 bug 来源。给所有元素统一设置 border-box 后，布局计算会直观很多，这也是 Bootstrap、Tailwind 等框架都在做的基础重置。
3.3 动画效果：涟漪、波浪、rotate3d 与金光闪闪
搜索热词里大量视觉动画相关的词，比如"css涟漪光圈扩散"、"css波浪效果"、"css rotate3d"、"css如何做出来金光闪闪的效果"、"css动画效果网站"。这些看起来是炫技，但背后其实都是 CSS 动画的经典组合。
涟漪光圈扩散的核心是 box-shadow 和 transform 的 scale。一个常见的实现是用 ::after 伪元素画一个圆，然后让它的 box-shadow 向外扩散并逐渐变透明，同时 scale 变大：
.ripple { position: relative; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 102, 0, 0.6); } .ripple::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 102, 0, 0.6); animation: ripple 1.5s ease-out infinite; } @keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }关于波浪效果，常见两种实现：一种是用 CSS border-radius 做不规则圆角变形动画，但效果有限；另一种是用 SVG 波浪路径配合 CSS 平移，实现前后两层波浪交错运动。SVG 那块儿稍微复杂，适合做 H5 页面顶部的动态分隔线。如果只要简单的波纹，也可以用 border-radius: 50% 加多个 radial-gradient 背景来模拟。
rotate3d 是 CSS 3D 变换里常被考到的点。transform: rotate3d(x, y, z, angle)四个参数分别代表绕 X、Y、Z 轴旋转的矢量分量和角度。最常见的写法是rotate3d(1, 1, 0, 45deg)，表示同时绕 X 轴和 Y 轴各旋转 45 度。要看到 3D 效果，必须给父容器设置 perspective，否则只是平面上的斜切。
金光闪闪效果是 H5 活动页里的高频需求，做法通常是光带扫过。思路是用一个线性渐变色块，加上 background-position 的动画，让高亮区域从左到右扫过文字或卡片。配合 background-clip:text 可以做出文字扫光。如果是纯色块，也可以用 ::after 做一条倾斜的半透明白条，用 translateX 动画扫过。这个效果不高级但很实用，能明显提升页面的质感。
如果你需要动画灵感，可以看看一些 CSS 动画展示站，比如 Animate.css、Hover.css、动漫风格的 codepen 精选。但注意别直接往生产项目里塞整库动画，最好按需提取关键帧，否则包体积和渲染性能都扛不住。
4. H5 与微信生态：真正的实战题都在这
H5 开发里，微信生态绝对是绕不开的一环。从公众号内嵌页、微信支付、分享卡片到开放标签调用小程序，每一个需求背后都有一堆文档和坑。这块内容在面试里也越来越常被问到，因为它是 H5 开发者实战能力的分水岭。
4.1 公众号 H5 与微信开放标签
搜索热词里有不少"微信公众号h5怎么打开小程序"、"微信公众号h5 点击按钮调取打开小程序页面 如何实现"、"h5微信浏览器内跳转app"，这些都属于微信开放标签的范畴。
先说场景：一个公众号的 H5 页面里，想通过一个按钮跳转到某个关联的小程序。官方方案是使用 wx-open-launch-weapp 开放标签，它允许在微信内置浏览器中打开同一公众号关联的小程序。使用前提是：公众号和小程序必须已关联，且域名已经配置到 JS 安全域名，页面引入了微信 JS-SDK 并通过 wx.config 注入了权限。
标签写起来像自定义元素：
<wx-open-launch-weapp id="launchBtn" username="gh_xxxx" path="pages/index/index"> <script type="text/wxtag-template"> <style>.btn { padding: 12px 24px; background: #07c160; color: #fff; border-radius: 6px; }</style> <div class="btn">打开小程序</div> </script> </wx-open-launch-weapp>注意里面必须用 script 标签包一个 wxtag-template 模板，不能直接写按钮元素。而且 wx-open-launch-weapp 是微信内置浏览器特有的，在普通浏览器里不会渲染成按钮，所以要给容器写一个降级样式。调试的时候如果点击没反应，优先检查 wx.config 的签名是否成功、用户名 username 是否为小程序的原始 ID（gh_ 开头的），以及公众号和小程序是否在同一个开放平台账号下。
如果要跳转的是 App，用的是 wx-open-launch-app 或者 URL Scheme。URL Scheme 的方式更灵活，但分享到微信以外的场景大概率会被拦截。开放标签在普通浏览器里没有效果，所以一般会写降级逻辑：检测微信环境才显示“在微信中打开”的引导提示。
"通过微信公众号访问h5页面"这个搜索词背后，其实是两个层面：一是公众号菜单/图文可以直接配置 H5 链接，二是 H5 页面通过 OAuth2 获取微信用户身份。很多开发者混淆了微信 H5 和微信小程序之间的登录方式，实际上 H5 网页走的是公众号网页授权，需要 appid、redirect_uri、scope=snsapi_base 或 snsapi_userinfo，拿到的 code 换 openid，再换用户信息。这个流程在面试里如果被深入问，可以从"静默授权 vs 用户授权"的区别来答。
4.2 分享、支付与文件下载的边界
"h5分享卡片到开发文档"、"企微h5分享"这两个热词指向的都是微信分享能力。公众号 H5 页面可以调用微信 JS-SDK 的 updateAppMessageShareData 和 updateTimelineShareData 来定制分享到好友和朋友圈的卡片标题、描述、图片和链接。注意现在分享卡片的配置需要用户主动触发一次点击后才会生效，不能一进页面就静默设置。这个"需要用户点击一次"的机制让很多开发踩过坑，因为老的接口 wx.onMenuShareTimeline 在旧版本里是允许直接设置的，新版本改成了需要"用户点击后才生效"，面试时说出这个差异会加分。
"企微h5文件下载"是企业微信环境下常见的需求，但企业微信对普通文件下载限制比较严格。常规做法是通过企业微信 JS-SDK 的 wx.agentConfig 注入后，调用相应下载接口，或者在后端生成链接后引导用户在企业微信浏览器里打开。直接 window.open 或者 a 标签 download 在企微里经常失效，这是环境限制，不是代码问题。知道这一点，遇到"企微里下载不了文件"的报障就能快速定位，而不是白查代码。
"h5微信浏览器内跳转app"在 4.1 提过，用 wx-open-launch-app 或 URL Scheme。这里要提醒一句：微信对 URL Scheme 的拦截策略是动态变化的，可能在版本更新后突然失效，所以生产环境一定要做好「无法打开则引导用户复制链接到浏览器」的降级方案。热词里还出现了"京东h5支付"、"鸿蒙微信无法h5支付"，这些本质上是 H5 支付在不同客户端的兼容性问题。京东 H5 支付是指京东商城在手机网页端拉起收银台的方案；鸿蒙版微信无法使用 H5 支付，可能是鸿蒙客户端对微信支付组件支持不完整，这种问题在前端无解，只能提示用户用其他客户端或走 App 支付。遇到这类问题，第一反应应该是排查环境而不是改代码，因为很多时候根本不是代码问题。
4.3 昵称、定位与"能否调用小程序经纬度"
"h5页面获取微信昵称"这个问题，我要先说一个更新：微信官方在 2022 年之后已经将 wx.getUserProfile 废弃，新规下 H5 里获取用户头像和昵称应该使用"头像昵称填写能力"，也就是 button 的 open-type="chooseAvatar" 配合 input 的 type="nickname"。这个变化对开发者影响很大，很多老项目还在用 getUserProfile 获取用户信息，现在基本都被限制或改为返回匿名信息。如果是通过公众号网页授权，OAuth 里可以拿到用户的昵称和头像，但前提是 scope 为 snsapi_userinfo 且用户主动授权。
"h5能调用微信小程序当前经纬度不"是个非常典型的实战问题。直接答案是：不能。H5 页面无法直接调用小程序的 wx.getLocation 获取经纬度。但小程序可以通过 web-view 承载 H5，在合适的时机通过 postMessage 把小程序里的经纬度传给 H5。流程是：小程序里用 wx.getLocation 拿到经纬度，通过 web-view 的 bindmessage 事件把数据传给 H5，H5 用 window.addEventListener('message') 接收。需要注意的是 postMessage 消息只能在特定时机触发，比如小程序分享、组件销毁或特定按钮点击时才会传递给 H5，不是实时通道。所以如果业务要求实时位置，建议 H5 自己用浏览器 Geolocation，或者接入地图 SDK 的定位能力。
说到定位，"uniapp h5使用腾讯地图获取定位报错:getlocation:fail translate coordinate system"这个热词也很典型。腾讯地图定位返回的坐标系是 GCJ-02（国测局坐标），但某些环境下 SDK 要求的是 WGS-84 或者反过来，才报 translate coordinate system 错误。解决办法是明确坐标系的转换：
// 在 uni-app 中，选择坐标系参数 uni.getLocation({ type: 'gcj02', success: (res) => { // 坐标已经是 GCJ-02，直接传给腾讯地图 } });如果项目同时接了微信 JS-SDK 的 getLocation，要注意微信返回的坐标系默认是 gcj02，直接传给浏览器 Geolocation 的 API 会导致偏移；反之亦然。这就是"坐标系转换"问题在多端项目里的典型表现。
5. 多端适配与 Uniapp 实战：网上搜不到答案的坑
最后这部分，写给那些已经在写 H5、但经常被多端问题折磨的人。搜索热词里大量 uniapp 相关的词，说明很多人正在用 uniapp 同时做 App、小程序和 H5。多端适配的第一步，就是搞清楚当前代码跑在什么环境里。
5.1 环境判断：App、小程序还是嵌套 H5
"uniapp+vue3+h5 里面怎么判断别人嵌套你的h5是app还是小程序"这个问题，核心是判断宿主环境。在 H5 世界里，UA 是判断环境的钥匙。小程序 web-view 的 UA 通常带有"miniProgram" 或 "MicroMessenger" 特征，App 内嵌的 webview UA 可能带有 App 品牌信息。比如微信内置浏览器 UA 里一定会有 MicroMessenger，"企业微信"会有 wxwork。
uniapp 自身也提供了一套环境判断 API：
// #ifdef H5 // 只有 H5 平台会编译到这一段 // #endif这种条件编译是在编译期生效的，它解决的是"同一个工程编译到不同平台时，执行不同代码"的问题。如果要判断运行时环境，可以用uni.getSystemInfoSync().uniPlatform或者uni.getSystemInfoSync().hostName。
判断嵌套 H5 是 App 还是小程序，更准确的方式是让宿主向 H5 注入标识。比如原生 App 的 webview 通过 JSBridge 注入了一个全局变量，小程序 web-view 可以通过 URL query 传参，或者使用 postMessage。如果你发现 UA 里没有可靠标识，最稳的做法是约定一个全局变量或者 URL 参数，由宿主容器在加载时写入。这个约定在项目初期就要定义好，否则后面很难补。
"uniapp微信小程序跳转h5"在小程序端是用 web-view 组件承载 H5 页面：
<web-view src="https://example.com/page"></web-view>web-view 的 src 域名需要在小程序后台配置业务域名，否则线上会白屏，这是最容易踩的坑。而"uniapp apk内跳转到微信h5页面"这个热词，指的应该是 App 中需要拉起微信并打开某个 H5，通常配合 H5 支付或微信登录使用。App 端拉起微信有专门的 SDK 接口，不能简单打开一个浏览器链接，否则会失败。
搜索热词里还有"通用万能封装app源码(可以封装任意网站,h5游戏,盒子,手游等等)带教程"。这里我要提醒一句：这种"万能封装"听起来很方便，但往往暗藏风险，封装包的代码不透明、更新不受控、甚至可能被用来承载违规内容。正规做法是用 uniapp 或 Capacitor 这类成熟框架做壳，再按规范接管 webview 能力和原生交互。面试时如果被问到"封装 App"，回答用成熟跨端框架 + 原生能力桥接，比说"下载了一个万能封装包"要专业得多。
5.2 扫一扫、定位与苹果底部安全区
"uni运行到h5上怎样使用扫一扫功能"这个问题很典型。uni.scanCode 在小程序端是封装的摄像头扫码能力，但在 H5 端，uni.scanCode 很可能不受支持或依赖原生 WebView 的扫码插件。纯浏览器场景里，想用扫码得引入第三方库，比如 html5-qrcode 或者基于 camera API 自己封装。再或者，在微信内置浏览器里可以引导用户使用微信的扫一扫能力（通过微信 JS-SDK 或开放标签），但跳出微信后就没法用了。所以在 H5 里做"扫一扫"功能，第一步是明确当前运行环境，然后按环境选择实现方式，否则很容易白做。
"小程序苹果底部兼容css"和"h5 苹果底部兼容"本质是同一个问题：iPhone 的底部 Home 指示条会遮挡固定定位的底部导航。解决方案是用环境安全区变量：
.bottom-bar { padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */ }还要配合 viewport-fit=cover，确保页面能延伸到安全区之外：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">如果不加 viewport-fit=cover，safe-area-inset-bottom 始终为 0，env() 就不会生效。这是很多开发者遇到"为什么加了 env 没反应"的原因。
"uniapp h5使用腾讯地图获取定位报错"已经在 4.3 提过，这里补充一个实战建议：多端定位不要依赖单一的 API，最好做一个统一封装，在 H5 端优先用浏览器 Geolocation，在 App 端用原生定位模块，在小程序端用 uni.getLocation。接口统一返回，内部各自实现。这样每端踩的坑都被隔离在封装内部，业务代码不需要知道坐标系的区别。
5.3 打包超时、Word 预览与宝塔部署
"uniapp打包h5 出现'连接服务器超时,点击屏幕重试'的页面"这个问题我在实际项目里遇到过。这个提示页一般不是业务代码报的错，而是 uniapp 内置的异常兜底页面，通常是静态资源加载失败或者接口请求异常导致。常见原因是：打包后的 index.html 里引用了绝对路径的静态资源，部署到二级目录时资源 404，于是页面卡在加载状态。解决办法是检查 manifest.json 里的 h5 配置，把路由模式从 hash 改成 history 时，必须有后端 rewrite 支持；同时确认 publicPath（Vite）或 base（Webpack）设置正确。
"vue2 h5页面想要预览word文件"也是个高频需求。浏览器原生不支持 Word 预览，常见方案有三种：第一种是用微软的 Office Online Viewer，把 Word 链接嵌入 iframe 就能预览；第二种是后端把 Word 转成 PDF 或图片，前端直接展示；第三种是用 docx-preview 这类纯前端库渲染 docx，但复杂排版支持有限。如果是企业内部系统，我优先推荐后端转 PDF，因为兼容性最好；如果是公开场景，可以试试 Office Viewer 的 iframe 方案。
"宝塔部署h5"是很多小团队常用的部署方式。宝塔面板里部署 H5 的步骤如下：
- 在宝塔面板新建站点，绑定域名，创建静态网站。
- 将构建产物（dist 目录）上传到站点根目录。
- 如果是 history 路由，需要在站点配置里加一条伪静态规则，把所有请求重写到 index.html：
location / { try_files $uri $uri/ /index.html; }- 配置 HTTPS 证书，启用强制 HTTPS，避免微信等场景下的签名或请求问题。
这段配置是 H5 部署最常被忽略的一环。很多人以为上传完就能访问，结果刷新二级路由就 404，其实就是少了 try_files 这条规则。另外微信里的 H5 页面如果涉及 JS-SDK 签名，页面域名必须配置在公众号的 JS 安全域名里，否则 wx.config 会失败。
结尾
这套八股文整理下来，最大的体会是：很多问题从表面上是一道面试题，本质上是一个完整的工程决策场景。比如 flex 和 grid 的选择、盒模型的理解、微信生态里的各种跳转限制，你只有真正做过、踩过坑，才能把八股答案说出"为什么"。所以我建议你在看这些知识点的时候，不要只背结论，最好能对应到自己项目里某个具体场景，想一想当时如果按这个思路处理，会不会少加班几小时。我每次整理笔记都会逼自己补一句"它解决了什么问题、在什么场景下不适用"，这句话比背十个属性都值钱。
