1.前言目前为止，在互联网行业，手机越来越智能，移动端占比越来越大，尤其是在电子商务、新闻、广告、游戏等领域。用户要求越来越高，网站功能越来越好，效果越来越酷，这就要求我们的产品质量越来越高。对于Web前端开发来说，是挑战，是问题，更是机遇。如何让我们开发的移动端页面有更好的交互体验，是本文的主要目的：移动端网页开发问题与优化总结。这只是我在开发的时候知道的坑。如果大家遇到其他坑，欢迎补充，或者觉得我说的有误，请多多指教！2、Meta标签页面在手机端显示时，加入这个meta可以强制页面保持文档宽度和设备宽度1:1，文档最大宽度比为1.0，并且不允许用户单击或缩放。放大屏幕进行浏览。（ios10以上的这个版本已经过期了，即使增加了下面的meta，用户也可以双击放大页面。可以参考以下链接根据自己的开发需要进行限制——ios10禁止用户缩放页面)禁止ios自动识别手机禁止android自动识别邮箱下面两个是针对ios上safari的地址栏和顶部样式栏的（我手机是安卓的，没仔细测试过，但是我加了）3.打电话和发短信CallTo:0755-10086Sendatextmessageto:100864.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);transform:translate3d(0,0,0);}说了这么多，这里有两个关于动画或者过渡的建议：1.在手机上（其实PC也一样）。CSS3动画或者transition尽量使用transform和opacity来实现动画，不要使用left和top。2、动画和过渡用css3可以解决的就不要用js了。如果是复杂的动画，可以使用css3+js（或者html5+css3+js）配合开发。效果只是出乎意料，但并非不可能。5.移动端的点击屏幕在响应点击事件时产生200-300ms的延迟，因为要等待确认是否是双击事件，会有300ms的延迟（两次点击之间的间隔events小于300ms，视为双击），体验不好。目前的解决方案，第一种是用touchstart或者touchend代替click。或者封装点击事件来代替点击事件。所谓tap事件是由touchstart事件+touchmove（判断是否为滑动事件）+touchend事件封装而成。关于触摸鼠标事件的延迟描述，我参考了叶小柴博客中的一张图。如下，在手机端，点击延迟接近400ms。对于用户来说，是非常严重的延迟！所以在手机上，不推荐使用click。附上叶小柴大师的原文——手持设备的点击响应速度、鼠标事件和触摸事件。6.图片优化6-1.base64编码图片替换url图片。不要发送它。对于一些小图标（8K以下的图标我都转成base64），图片可以使用base64来减少请求发送次数。特别是在移动端，请求非常宝贵。网速不好的时候，请求是最宝贵的。6-2。图片压缩对于整个网站来说，图片是占用流量最多的资源之一。如果您不能使用它们，则不适用。图标可以用base64编码，换成字体图标，SVG等，你需要选择最合适的。格式，合适的大小，然后压缩——这里推荐腾讯推出的智能地图。PS：过度压缩图片尺寸会影响图片的显示效果，并可能使图片模糊。一般来说，质量在60左右！6-3。图片延迟加载首屏加载的速度直接影响用户体验。建议仅在用户需要时才加载非首屏图像资源。这样可以大大优化首屏加载，减少首屏加载所需的时间！ps：懒加载需要用js频繁操作dom，会造成大量的重绘和渲染，影响性能。6-4。显示img或背景图有两种方式，一种是用图片标签显示，一种是用背景图显示！两者的区别写在下面。img:html中的标签img是网页结构的一部分，在加载结构的过程中会和其他标签一起加载。background：作为css背景图片存在的图片背景，直到结构加载完毕（网页内容全部显示完毕后）才会开始加载。也就是说，网页会先加载标签img的内容，然后再加载背景图片background引用的图片。如果引入图片，img后面的内容要等到图片加载完成后才会显示。并使用背景导入相同的图片。网页结构和内容加载完成后，会加载背景图片。网页内容可以正常浏览，但是看不到背景图片。至于这两个，大家根据习惯和需求等权重因素来选择吧！7、快速回弹滚动在ios上，如果有部分滚动，这个属性必须加上！如果不加，滚动会很慢，看起来像一张卡片，一张卡片。-webkit-溢出滚动：触摸；但是，添加这个会导致ios上的错误。布局如下。fb-box是一个很大的div，包含了页面上的所有元素，包括你看到的弹窗。dialog-img，并设置高度：100%；-webkit-溢出滚动：触摸；职位：相对；需要定位，并且-webkit-overflow-scrolling:touch;也是必须的，但是这样设置，在ios上会有bug。页面滚动一定距离后，点击显示弹窗，然后关闭弹窗，你会发现，部分弹窗仍然“停留在页面上”。方案一：将弹窗的div和.fb-box布局为兄弟节点，外层再包裹一个div。即使坑已经爬上去了，效果如下。方案二：去掉.fb-box:Ralative;的位置。让弹窗的div引用body来定位！8.使用fixedios时要小心。定位固定元素很容易出错。软键盘弹出时，会影响固定元素的定位，会出现元素错位（滚动和还原），有时会出现闪屏效果。我也搜索过这个问题，发现其他人遇到过我没有遇到过的问题！真的，哎~。所以在手机上，不建议使用fixed定位，改用absolute！如果一定要用，写完一定要测试几次！9.消除transitionsplashscreenPS：我最近开发了这个问题，不加这段代码好像没有效果，但是之前需要加，所以加了。现在我没有添加，有任何问题也没有反馈！.no-flash{-webkit-transform-style:preserve-3d;-webkit-backface-visibility：隐藏；-webkit-透视：1000；}10.去除ios系统a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0;)}中元素被触摸时产生的半透明灰色遮罩11.ios，去掉默认input默认样式input,button,textarea{-webkit-appearance:none;}12.左右滑动，避免页面滑动。这个细节是我在基于vue开发焦点图时遇到的。后来实在找不到办法，就直接在sf上问了个问题。可以参考：移动端滚轮播放图片，上下滑动时，不触发页面滚动。ps：我没有使用任何库进行滑动。我是根据touchstart和touchend的移动距离来判断是左右滑动还是上下滑动！13.vue-router和微信分享的问题分享发送的连接如下http://www.example.com/dist/html#/index?utm_source=sharehttp://www.example.com/dist/html#/index.html/index?utm_source=share但是分享后的实际链接如下。如果有人点击分享链接，网页http://www.example.com/dist/html?from将不会被打开=xxxx#/index&utm_source=sharehttp://www.example.com/dist/html#/index.html?from=xxxx/index&utm_source=share解决方案1.自定义分享地址2.避免使用单文件应用14.iphoneXQi刘海苹果新手机，刚出来没多久，笑料就坐不住了，各种调侃，今天就来说说吧！说说iphoneX给前端带来的麻烦，也说说给UI带来的麻烦吧！下面介绍一下达摩、张新旭等人对iphoneX齐刘海的解决方案！避免当时跳坑！iPhoneX的gap和CSS使用CSSShapes实现元素滚动自动环绕iPhoneX的刘海iOS11网页适配问题分析手机管家iPhoneX的适配总结15.上面提到的其他参考都是遇到的具体问题。一些比较通用的细节优化，或者开发中遇到的问题，比如：压缩代码、图片、合并文件等。可以参考下面的资源，这些我就不展开了！1、web移动前端有哪些优化方案？2.Web移动页面性能优化方案3.Web前端优化最佳实践与工具合集4.移动前端系列-移动页面性能优化5.Web性能优化：图片优化16.总结我在移动Web（手机网站）以上，遇到的问题暂时就以上这些！肯定还有很多问题我没有遇到，以后会记录下来，但不一定以文章的形式发表。如果大家在开发手机网站的过程中遇到了大大小小的问题，欢迎在评论或者文章的形式中提醒！方便以后避免踩坑！最后，如果大家有什么要补充的或者觉得我写的不好的，那就错了！欢迎咨询！--------------------------华丽的分割线-------------------------想了解更多，关注我微信公众号：手厚书阁
