全部文章
共 57 篇 · 按发布时间倒序
Swiper 轮播图在移动端滑动不流畅
Swiper 在嵌套在垂直滚动里时，容易发生滑动冲突，配置 preventClicks 和 touchRatio 可以解决。
移动端弹窗动画变形原点异常
在手机上做点击放大弹窗动画，transform-origin 经常不会对准点击位置，需要动态计算坐标。
iOS Safari select 下拉框样式错位
iOS 原生 select 组件无法通过 CSS 修改很多样式，通常需要用自定义的 UI 组件替代。
H5 LocalStorage 上限与清理策略
大部分浏览器 LocalStorage 只有 5MB，缓存过多会抛出 QuotaExceededError，需要做 LRU 清理。
H5 密码框触发浏览器自动填充问题
Chrome 会自动填充带密码框的表单，可能导致页面样式发黄，用 autocomplete="new-password" 禁用它。
移动端多行文本溢出截断省略号
单行截断用 text-overflow，多行截断用 -webkit-line-clamp，但要小心 flex 布局下的失效问题。
iOS 橡皮筋效果（Overscroll）解决
滑动到底部时整个页面跟着上下弹动？使用 overscroll-behavior: none 或固定 body 高度解决。
UC 浏览器小说排版与 H5 阅读模式
UC 浏览器自带阅读模式，可能会把原本精心设计的 H5 样式剥离，需要禁止浏览器嗅探。
腾讯 X5 内核 H5 兼容与缓存问题
微信安卓端的 X5 内核落后于最新 Chrome，flex 和 grid 的某些新特性不能用，缓存策略也有所不同。
Chrome 移动版 H5 调试与适配
Chrome DevTools 虽然在移动端最标准，但暗黑模式和字体缩放依然可能导致排版错乱。
Safari 浏览器特有 H5 兼容性汇总
Safari 对 CSS 的解析非常严格，日期格式解析、正则回溯、弹窗拦截，经常让开发者头疼。
医疗问诊 H5 对话流与输入框适配
医疗问诊 H5 最怕 iOS 键盘顶起输入框导致上面的聊天记录被遮挡，必须动态计算视口高度。
金融理财 H5 图表与数字滚动适配
金融类 H5 的 K 线图、数字滚动特效在低端安卓机上极易掉帧，需要开启硬件加速和按需渲染。
在线教育 H5 直播答题页面适配
教育类 H5 经常需要全屏防作弊、横竖屏切换，以及处理视频与白板混排的复杂布局。
电商详情页移动端 H5 适配要点
电商 H5 极度依赖转化率，底部购买栏、规格弹窗的安全区和键盘遮挡，是必须完美适配的核心。
Taro 多端开发 H5 端特有 Bug 汇总
Taro 在编译到 H5 时，滑动穿透和 canvas 层级问题频出，掌握这些排雷技巧能省下大量时间。
uni-app 编译 H5 端特殊样式兼容
uni-app 虽然能跨端，但在 H5 下 rpx 换算和 fixed 定位仍有兼容问题，本文教你如何做特定环境降级。
React 移动端适配与性能优化实战
React 移动端项目常面临首屏慢、长列表卡顿，本文提供虚拟列表、代码分割与骨架屏的落地方案。
Vue 移动端 H5 适配常见踩坑指南
Vue 项目在移动端经常遇到点击事件失效或路由切换白屏，本文梳理了 Vue 2/3 在移动端 H5 开发中的核心适配技巧。
H5 首屏加载性能优化核心指标
首屏白屏时间太长？从 FCP、LCP 等指标入手，优化移动端 H5 性能。
横屏时字体自动放大的 CSS 修复
iOS 横屏时，部分网页的字体会突然变很大，教你禁用系统文字大小调整。
WebP 图片格式在移动端的兼容检测
安卓和 iOS 对 WebP 的支持程度不同，如何用 picture 标签做降级？
移动端图片懒加载与闪屏优化
列表页图片太多导致加载慢？利用 Intersection Observer 实现零依赖懒加载。
iOS 日期选择器 input type=date 样式错乱
iOS 上的 input type=date 默认样式与其他平台不一致，高度和居中经常出问题。
移动端隐藏滚动条但保留滚动功能
H5 侧边栏或者列表横向滚动时，那条丑陋的滚动条怎么隐藏？
CSS 毛玻璃效果 backdrop-filter 兼容
backdrop-filter 在部分安卓机型和微信里失效，如何优雅降级？
安卓 WebView H5 定位失败解决
iOS 上 H5 定位正常，但在安卓 App 内嵌的 WebView 里拿不到经纬度？
钉钉 H5 微应用 JSAPI 鉴权与调用
钉钉微应用无法调用扫一扫或获取用户信息？了解 dd.ready 与 authCode 获取。
微信内置浏览器视频自动播放 H5
微信里的 video 标签无法自动播放？解析微信 X5 和 WKWebView 的视频策略。
iOS 局部滚动区域卡顿、无惯性
写了 overflow: auto，但在 iPhone 上滑动没有惯性，像卡住了一样。你需要加一行代码。
移动端 1px 边框变粗解决方案
在 Retina 屏幕上，CSS 写的 1px 会比视觉上的 1px 粗，教你用 transform scale 解决。
安卓全面屏手势导航栏高度动态适配
安卓机型碎片化严重，全面屏手势条高度从 16px 到 48px 不等。如何用一套代码完美适配所有安卓设备？
Safari 14 及以下不支持 Flex gap 兼容
在旧版 iPhone（iOS 14）上，flex 布局的 gap 属性失效，导致元素全部挤在一起。
微信 H5 自定义分享卡片（JSSDK）
如何让微信分享出去的 H5 卡片拥有自定义标题、描述和图片？微信 JSSDK 配置指南。
微信小程序 web-view 组件 H5 交互兼容
H5 嵌套在微信小程序 web-view 里，JSSDK 失效？返回按钮冲突？了解 web-view 环境下的特殊适配。
iOS 下 position: sticky 失效的原因
position: sticky 在 iOS 上经常滚动一下就跟着跑？排查父级 overflow 设置和 Safari 兼容性。
iPad 分屏模式（Split View）响应式适配
iPad 分屏时宽度可能只有 320px？了解 iPad 的多任务模式（Slide Over / Split View）对 H5 布局的影响。
iPhone 18 爆料尺寸响应式预览 - 提前做好适配
传闻 iPhone 18 将采用屏下 Face ID，屏幕尺寸再次微调。提前用预览工具测试你的网站在 iPhone 18 尺寸下的表现。
移动端 hover 样式粘滞问题解决
在手机上点了一个带 hover 的卡片，滑走后高亮状态卡住不消失？用媒体查询彻底避开它。
iOS 键盘弹起导致的底部 Fixed 按钮错位
在 iPhone 上弹出软键盘，固定在底部的输入框会脱离屏幕下方？介绍 focusin 和 resize 监听方案。
折叠屏手机 H5 适配 - 展开与折叠时的重排问题
华为 Mate X、三星 Fold 等折叠屏展开时，H5 布局错乱或白屏？了解折叠屏的视口变化和 resize 事件监听。
iOS 输入框聚焦页面放大 Bug 修复
iPhone 上点击 input 输入框，整个网页突然被放大？这是因为字体小于 16px 引起的。
抖音小程序横屏适配 - 游戏与视频场景避坑
抖音小程序的横屏模式（游戏、视频播放）如何适配？本文讲解 pageOrientation 配置、安全区和分辨率缩放。
移动端点击事件 300ms 延迟彻底消除
为什么移动端按钮点起来慢半拍？教你用 touch-action 和 viewport 彻底干掉 300ms 延迟。
小红书内置浏览器 H5 适配 - 避开右下角浮动按钮
H5 分享到小红书，被右下角的“留个言”和“赞”遮挡？用这个工具预览小红书内嵌浏览器的真实尺寸和遮挡区。
华为鸿蒙 HarmonyOS NEXT 响应式适配 - 避开底部导航栏
鸿蒙 Next 去掉了安卓底层，系统 UI 变化导致 H5 在华为手机上的布局错乱？用这个工具在线预览。
移动端 100vh 真实高度问题 - 解决地址栏遮挡
移动端浏览器的地址栏收缩导致 100vh 计算不准确，本文教你如何用 CSS 替代方案和 JS 动态计算完美解决。
H5 页面底部安全区适配 - env(safe-area-inset-bottom) 完全指南
iPhone 底部黑条会遮挡 H5 内容？本文详解 env(safe-area-inset-*) 环境变量、viewport-fit=cover 配置和三种常见适配场景。
微信小程序的横屏适配 - pageOrientation 配置与布局技巧
微信小程序默认只支持竖屏，开启横屏需要配置 pageOrientation。本文说明横屏模式下的布局技巧、安全区变化和常见问题。
响应式设计常见断点 - 媒体查询断点选择指南
响应式断点应该设在哪？本文列出 2026 年主流设备的常见断点，并说明移动优先和桌面优先的选择策略，附带在线对比工具。
多端预览工具推荐与使用教程 - 3 分钟上手
一款免安装、免登录的多端响应式预览工具。输入网址即可同时预览页面在手机、平板、桌面上的真实效果，支持缩放、氛围背景、水印、分享。
iPhone 16e / 17 / Air 尺寸对比 - 一站看清三款机型差异
iPhone 16e、17、17 Air 三款机型的屏幕尺寸、安全区、可视区差异一览。用这个工具并排对比三款机型的真实渲染效果，检查你的页面在不同机型上的适配。
支付宝小程序响应式布局 - rpx 单位在线调试
支付宝小程序的 rpx 单位在不同机型上表现不一？用这个工具在线预览页面在 750 设计稿下的真实效果，检查 rpx 换算、安全区、底部 TabBar 适配问题。
钉钉 PC 客户端内嵌网页适配 - 1024 和 975 两个关键尺寸
钉钉 PC 客户端的两个窗体临界值 1024×726 和 975×600，是工作台应用适配最容易踩的坑。用这个工具在线预览两个尺寸的实际效果。
桌面 vs 移动端响应式对比 - 一键看两侧布局差异
桌面端正常但手机上错位？用这个工具同时并排预览桌面和手机，秒查响应式断点问题。
微信内置浏览器 H5 调试 - 在线预览在微信中的效果
H5 在微信里打开就错位？用这个工具在线预览你的网页在微信内置浏览器里的真实效果，检查底部安全区、顶部导航栏、X5 内核渲染差异;
iPhone 17 灵动岛响应式预览 - 检查布局是否被遮挡
iPhone 17 的灵动岛会让顶部导航错位？用这个工具在线预览你的网页在 iPhone 17 上的真实效果，检查安全区、顶部避让、布局遮挡问题