segmentfault.com/a/1190000011338800
1 简介
迄今为止，在互联网行业中，手机越来越智能化，移动终端的比重越来越高，尤其是在电商、新闻、广告、游戏等领域。 用户要求越来越高，网站功能越来越好，效果越来越亮眼，这就要求我们的产品质量越来越高。 对于Web后端开发来说，是挑战，是困境，也是机遇。 如何让我们开发的移动页面有更好的交互体验，是本文的主要目的：移动web开发问题及优化总结。 这只是我开发时就知道的一个陷阱。 如果您遇到其他坑，请补充，或者认为我有错误，欢迎赐教！
2. 元标签
当页面在手机上显示时，添加这个meta可以强制页面保持文档长度与设备长度为1:1，文档最大长度比例为1.0，用户不允许通过点击或缩放来触摸屏幕。 放大浏览。 （ios10以上版本早已失效，即使添加了下面的meta，用户也可以双击缩放页面。您可以参考下面的链接，根据自己的开发需求进行限制——严禁用户在ios10中缩放页面）
在 ios 上禁用手动电话识别
在 Android 上禁用邮箱的手动识别
下面两个是针对ios上safari上的地址栏和顶部样式栏（我的手机是安卓，这个我没有仔细测试过，不过我已经添加了）
3. 打电话和发短信
电话：0755-10086
发送短信至：10086
4.为css3过渡动画启用硬件加速
ps：网上说如果用这个的话，手机的耗电量也会降低。 我也在手机上简单试了一下，确实有这样的事情。 平时看博客，5分钟左右减少1%。 使用硬件加速后，3分钟左右减少1%。 请注意合理使用。
.translate3d{
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
变换：translate3d(0,0,0);
说到这里，我还想提一下关于动画或过渡的两个建议：
1、手机上（其实PC上也是一样）。 CSS3动画或者transition尽量使用transform和opacity来实现动画，不要使用left和top。
2.如果动画和过渡可以用css3解决，就不要使用js。 如果是复杂的动画，可以使用css3+js（或者html5+css3+js）来配合开发。 效果只是出乎意料，但并非不可能。
5、移动端点击屏幕形成200-300ms的延迟响应
因为点击事件要等待确认是否为双击事件，所以会有300ms的延迟（两次点击事件间隔大于300ms，则视为双击），体验为不好。 目前的解决方案，第一个是使用touchstart或者touchend来代替click。 或者封装tap事件来代替click事件。 所谓tap事件是由touchstart事件+touchmove（判断是否是滑动事件）+touchend事件封装而成。
关于触摸键盘风波的延期解释，我引用叶小柴高手博客上的一张图片，如下
在手机上，点击的延迟接近400ms。 对于用户来说，这是严重的延迟！ 所以在手机上，不建议使用click。
附叶小柴大师原文——手持设备的点击响应率、鼠标烦恼、触摸烦恼。
6. 图片优化
6-1. Base64编码图像替换url图像
对此不应有任何解释，只要可以就不要发送请求。 对于一些小图标（我把8K以下的图标全部转成base64）之类的，可以对图片使用base64，以减少发送的请求。 尤其是在移动端，请求变得非常罕见。 当网速不好的时候，请求是极少的。
6-2. 图像压缩
对于整个网站来说，图片是占用流量最多的资源之一css3 左右滚动效果，不使用就不适用。 图标也采用base64编码，替换为字体图标、SVG等。要使用它们，必须选择最合适的格式和规格。 ，然后压缩——这里推荐腾讯推出的智能地图。
PS：过度压缩图片尺寸会影响图片显示的效果，并可能使图片显得模糊。 一般来说，品质在60左右！
6-3. 图片延迟加载
首屏加载速度直接影响用户体验。 建议仅在用户需要时才加载非首屏图片资源。 这样可以极大的优化首屏加载，减少首屏加载所需的时间！
ps：延迟加载需要使用js频繁操作dom，会造成大量的重绘和渲染，影响性能。
6-4.img或背景
图片的显示有两种方式，一种是带图片标签显示，一种是带背景图片显示！ 下面写下三者的区别。
img:html 中的标签 img 是网页结构的一部分，在加载该结构的过程中会与其他标签一起加载。
background：作为css背景图片存在的图片背景，直到结构加载完毕（网页全部内容显示完毕后）才会开始加载
也就是说，网页会先加载标签img的内容，然后再加载背景图片background引用的图片。 如果引入图片，则直到图片加载完毕后，才会显示img后面的内容。 并使用背景导入同一张图片。 网页结构和内容加载完毕后，就会加载背景图片。 网页内容可以正常浏览，但看不到背景图片。 至于这两个，大家根据习惯、需求以及其他体重激励来选择！
7. 快速回弹滚动
在ios上css3 左右滚动效果，如果有部分滚动，必须添加这个属性！ 如果不加的话，滚动会很慢，而且看起来像卡卡一样。
-webkit-overflow-scrolling：触摸；
不过，添加这个会导致ios上出现bug。
布局如下
.fb-box是一个大div，包含了页面上的所有元素，包括你看到的弹窗.dialog-img，并设置height:100%;-webkit-overflow-scrolling:touch;position:relative;
需要定位，-webkit-overflow-scrolling: touch; 也是必须的，但是这样设置的话，ios上会有一个bug，页面滚动一定距离后，点击显示弹窗，然后关闭，你会发现弹窗的一部分窗口也“停留在页面上”。
解决方案一：
将弹出窗口的div和.fb-box以兄弟节点的形式布局，在内层包裹另一个div。 即使坑起来了，效果如下
解决方案2：
.fb-box 删除位置：相对；。 让弹窗的div参考body进行定位！
8、谨慎使用固定式
ios下固定元素很容易出现定位错误。 软键盘弹出时会影响固定元素的定位，导致元素错位（滚动和还原），有时还会出现崩溃的效果。 我也搜索了这个问题，发现别人也遇到了我没有遇到的问题！ 真是的，嘿嘿~ 所以在手机上，不建议使用固定定位，使用绝对定位即可！ 如果一定要使用的话，写完之后一定要多测试几次！
9. 消除过渡崩溃
PS：我最近开发了这个问题，好像不加这段代码没有影响，但是本来是要求加的，所以加了，但是现在没加了，还有有任何问题都没有反馈！
.无闪光{
-webkit-transform-style：保留3d；
-webkit-backface-visibility：隐藏；
-webkit 视角：1000；
10、去除ios系统中触摸元素时形成的半透明黑色描边
a,按钮,输入,文本区域{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
11.去掉ios中默认输入默认样式
输入、按钮、文本区域{-webkit-appearance: none;}
12. 左右滑动可避开幻灯片后面的页面
我在基于vue开发焦点图的时候就遇到了这个细节。 后来实在找不到办法，就直接在sf上问问题了。 可以参考以下：手机轮播图，上下滑动时，页面不会触发滚动
ps：我没有使用任何滑动库。 我通过touchstart和touchend的距离来判断是左右滑动还是上下滑动！
13、vue-router和Momo共享的问题
发表评论