移动端优化
本话题发布移动端优化相关的问答文章和技术分享，将持续更新，为您推荐了21篇问答，访问即可查看更多精彩内容。
-
2
回答
30浏览
移动端点击延迟怎么解决？React里加了fastclick还是有卡顿
我在做移动端 React 项目时，发现按钮点击后有明显延迟，大概300ms左右。查资料说是因为浏览器要判断是不是双击缩放，所以加了 fastclick 库，但效果不明显，有些地方甚至更卡了。 下面是我...
-
1
回答
25浏览
移动端横竖屏切换时布局错乱怎么解决？
我在做移动端页面，用的是 rem 布局，横屏时内容被拉得很宽，元素都挤在一起了，看着特别乱。试过用 @media (orientation: landscape) 单独写样式，但效果不稳定，有些机型根...
-
2
回答
28浏览
移动端图片加载卡顿怎么优化？
我在做移动端页面时，首页有很多高清商品图，用的是普通 ，结果在低端安卓机上滑动特别卡，FPS 掉到 20 多。试过加 loading 占位和懒加载，但首屏还是慢。有没有更有效的性能优化方案？ 目前图片...
-
2
回答
31浏览
移动端弹窗打开后怎么防止背景滚动穿透？
我在做移动端页面时，点击按钮弹出一个 fixed 定位的弹窗，但发现手指在弹窗上滑动时，底下的页面还是会跟着滚动，这体验太差了。 试过给 body 加 overflow: hidden，但在 iOS ...
-
2
回答
48浏览
viewport 设置后页面在手机上还是缩放异常怎么办？
我给移动端页面加了 viewport meta 标签，但某些安卓机上打开还是显示特别小，像是没生效一样。明明写了 width=device-width，难道还要配合 CSS 做什么处理？ 这是我现在用...
-
1
回答
33浏览
移动端适配用 rem 还是 vw 更合适？
最近在做一个移动端 H5 项目，UI 给的设计稿是 375px 宽。我之前用的是 rem 配合 JS 动态设置根字体大小，但发现有些安卓机上字体渲染有点模糊。 听说现在很多人直接用 vw 单位做适配，...
-
1
回答
20浏览
移动端适配用 rem 还是 vw 更合适？
最近在做一个移动端 H5 项目，UI 给的设计稿是 375px 宽。我之前用的是 rem 配合 JS 动态设置根字体大小，但发现不同机型下还是有细微偏差，而且代码写起来有点麻烦。 听说现在很多人直接用...
-
1
回答
31浏览
移动端调试时样式错乱怎么排查？
我在做移动端页面时，本地 Chrome 模拟器看起来正常，但真机上某些元素位置完全不对，试过用 vConsole 和 Chrome DevTools 远程调试，但还是找不到原因。是不是媒体查询写错了？...
-
1
回答
58浏览
移动端 viewport 设置后页面还是缩放异常怎么办？
我在 React 项目里加了 viewport meta 标签，但 iOS 上页面还是会自动缩放，字体忽大忽小，特别在横屏时更明显。试过 width=device-width 和 initial-sc...
-
2
回答
32浏览
移动端图片加载太慢怎么优化？
我在做移动端页面时，发现首屏的几张大图加载特别慢，用户经常看到空白好几秒。我已经用了懒加载，但首屏图片还是卡，有什么办法能提速吗？ 这是我现在用的图片代码： <img src="banner-m...
-
1
回答
54浏览
移动端怎么阻止橡皮筋效果导致页面抖动？
我在做移动端H5页面时，发现当用户在顶部下拉或底部上拉时会出现橡皮筋效果（就是那种回弹的滚动），特别是在iOS Safari上特别明显。这会导致整个页面被拖拽变形，体验很差。 我试过给 body 加 ...
-
2
回答
24浏览
移动端 touchmove 监听加了 passive 为啥还是卡顿？
我在做移动端的滑动组件，给 touchmove 事件加了 { passive: true }，但页面滚动还是明显卡顿，是不是我用错了？ 之前没加 passive 的时候 Chrome 控制台有警告，加...
-
2
回答
54浏览
移动端 touch 事件延迟怎么解决？
我在做移动端页面时，发现点击按钮有明显延迟，大概300ms左右，用户体验很差。查了下说是浏览器默认的双击缩放导致的。 试过加 user-scalable=no 到 viewport，但 Safari ...
-
2
回答
27浏览
iOS安全区域适配导致页面底部被遮挡怎么办？
我在做移动端页面时，iPhone X及以上机型的底部导航栏总是被系统手势栏挡住，加了padding-bottom: env(safe-area-inset-bottom)也没用，是不是哪里写错了？ 我...
-
1
回答
58浏览
移动端下拉时出现橡皮筋效果怎么阻止？
我在做移动端页面，当用户在顶部下拉或者底部上拉时，整个页面会出现那种“橡皮筋”回弹的效果，特别影响体验。我试过给 body 加 overflow: hidden，但没用，滚动还是能触发。 也查了资料说...
-
2
回答
54浏览
移动端滚动禁用橡皮筋效果在iOS上失效怎么办？
在开发移动端页面时，想彻底禁用列表的橡皮筋回弹效果。之前用了overflow: hidden和监听touch事件，安卓没问题但iOS依然有回弹，滚动还出现卡顿，求大佬指点！ 尝试过在容器加了以下代码：...
-
2
回答
45浏览
移动端点击事件300ms延迟怎么彻底解决？
最近在做移动端适配时发现，页面按钮的点击事件有明显延迟，测试工具显示每次点击都有300ms左右的延迟。我尝试过引入FastClick库，但页面加载时控制台报错Cannot read propertie...
-
2
回答
43浏览
移动端滚动卡顿时，怎么用Passive监听优化事件？
在优化移动端页面时，我给触摸事件加了{ passive: true }，滚动确实流畅了，但有个问题：touchMove里调用event.preventDefault()阻止滚动时完全没反应了，这是为什...
-
2
回答
81浏览
为什么我的页面在Android上字体显示模糊？
最近在优化移动端页面，发现同样的字体在iOS显示很清晰，但Android设备上却特别模糊。已经试过加了-webkit-font-smoothing和-moz-osx-font-smoothing，还调...
-
2
回答
59浏览
iOS键盘弹起时输入框被遮挡怎么解决？
在做移动端表单时发现，iOS设备键盘弹起后输入框被遮挡，试过加padding-bottom和设置position: fixed都不管用，有遇到过类似问题吗？ 代码结构是这样的： <div cla...
