移动端知识点（索引作用）

搜集移动端常见的坑及适配原理，还有一些常用功能

本人都来源互联网，都提供原链接

移动端UI设计方案

https://juejin.cn/post/6844903651245293582

先说了CSS设计的像素，再说设备的屏幕物理像素。他们的DPR比例关系

1px问题

设置1px，如果DPR> 1, 根据DPR进行缩小，这样可以准确控制0.5PX问题，对于Android Web，可以使用CSS缩放解决无法识别0.5PX问题

REM

由于不同的设备的宽度的像素不一致，所以需要根据常规的750px设计稿进行按比例计算控件的宽度像素。为了在不同宽度的设备上，实现等比例适配。REM让所有的像素，都参考根元素的font-size按比例来设置。不同宽度的像素，按照当前设备的物理屏幕宽度像素与750px比例来设置根元素的font-size，这样整个页面也会按照比例适配。

所以REM是参考根元素像素作为在750px设计图下的实际的物理单位了。其它页面，按照比例适配。

高清图清晰度问题

然后他们之间有多种比例，如果DPR>1，会导致设备的图片的物理像素色值无法完全在设备上展示出来，因为图片的像素数据源没有完全占满物理像素点。解决方案是，initial-scale设置为DPR的缩小倍数。这样假如DRP=2, 则initial-scale=1/2。比如宽度是100px，按道理来说，默认initial-scale=1时，物理距离和PC WEB一致的。现在只会是50px物理像素的距离。（但是50px距离，是100px物理像素渲染的，所以颜色很准确）

考虑使用2倍图和3倍图来保证图片高清，控件的宽度为实例设计图的REM px单位。

使用img标签的srcset属性

<img src="conardLi_1x.png"
 srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">

使用js自带的 Image 异步加载图片

var dpr = window.devicePixelRatio;
if(dpr > 3){
	dpr = 3;
};

var imgSrc = $('#img').data('src'+dpr+'x');
var img = new Image();
img.src = imgSrc;
img.onload = function(imgObj){
	$('#img').remove().prepend(imgObj);//替换img对象
};

其它webViewUI功能适配

微信端web页面缓存不刷新

微信iOS客户端升级内核为wkwebview后，微信返回上一页的按钮会强制性使用页面缓存，困扰了我整整一天，解决方案如下。

//解决微信内核为wkwebview时返回上一页，界面不刷新的问题
window.onpageshow = function(event){
   if (event.persisted) {
       window.location.reload();
   }
};

作者：荼荼小蘼
链接：https://www.zhihu.com/question/30465777/answer/190483032
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

JS文件内网正常，自测正常。上线访问不了，可能是被劫持了

解决方案，修改js的http mimetype为text。避免命中劫持

 https://www.zhihu.com/question/34556725/answer/60484635

红米手机，ua返回iphone，根据平台返回正确的ua

一些情况下对非可点击元素监听click事件，ios下不会触发，css增加cursor:pointer

https://www.zhihu.com/question/34556725

lib-flexible的Android高分辨率代码有问题，还是用1dpr比例

https://juejin.cn/post/6844903951012200456

ios的body设置overflow:hidden后仍然可以滚动

一般在所有元素最外层再包一个大盒子.wrapper

.wrapper{
    position:relative;
    overflow:hidden;
}

安卓部分版本input里的placeholder位置偏上

把input的line-height设为normal

input{
    line-height:normal
};

iOS fixed布局问题

Web移动端Fixed布局的解决方案

一句话解释就是把页面滚动改为容器内滚动。很多问题，都是给当前异常的元素套一层div，再设置position：relative；

iOS滚动卡顿

滚动的容器加上这个

-webkit-overflow-scrolling: touch;// 可能会导致，点击穿透问题

iOS滚动时动画停止

移动端滚动懒人推荐使用better-scroll，很好的插件

ios滚动动画停止的原因及其他解决办法：CSS3 动画在 iOS 上为什么会因为页面滚动也停止？

长按闪退

element {
    -webkit-touch-callout:none;
}

禁止数字识别为电话号码

<meta name = "format-detection" content = "telephone=no">

手机旋转时禁止字体大小自动变化

 -webkit-text-size-adjust:100%;

取消点击高亮

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

ios滚动时动画停止

移动端滚动懒人推荐使用better-scroll，很好的插件

ios滚动动画停止的原因及其他解决办法：CSS3 动画在 iOS 上为什么会因为页面滚动也停止？

X5浏览器问题

hoosin/mobile-web-favorites#11

移动端隐藏手机浏览器的地址栏一下底部的菜单栏

隐藏所有工具条

  <!-- webApp全屏显示，IOS设备 -->
  <meta name='apple-mobile-web-app-capable' content='yes' />
  <!-- 通用的浏览器 -->
  <meta name='full-screen' content='true' />
  <!-- QQ浏览器（X5内核）独有的META -->
  <meta name='x5-fullscreen' content='true' />
  <!-- 360浏览器独有的 -->
  <meta name='360-fullscreen' content='true' />

移动端 a 标签点击会有蓝色的背景色

a { -webkit-tap-highlight-color:transparent; }

点透问题

大致原理就是，点击后，会产生责任者链（也就是事件冒泡）。可以通过给响应元素一个大于300ms的动画，让它自己消耗掉click事件。或者按钮的view下面，内生成一个透明层，让它来阻止事件传递。

也来说说touch事件与点击穿透问题

一般懒人处理点透的方案都是引用fastclick，但是这个插件在某些场景下也有坑，一般要用它的话最好fork下源码然后修改一下，开发中遇到了以下2个坑：

1.安卓某些版本触发两次点击问题

Fastclick 导致click事件触发两次的问题

2.光标移位问题（这个问题排查了了好久才找到是fastclick的问题）

FastClick 填坑及源码解析

键盘input键盘遮挡输入框问题

这种输入在页面下方的布局也很常见，一般评论，留言，聊天都会使用这种布局，但是有时候弹起的键盘会盖住输入框，解决方案如下：

移动web页面，input获取焦点弹出系统虚拟键盘时，挡住input，求解决方案？

浮层上进行滑动，浮层下面的页面也跟着滚动

本质上，还是给异常事件交互或者异常布局的div再套一层，并且设置

overflow: hidden;
position: relative;

web移动端浮层滚动阻止window窗体滚动JS/CSS处理

移动端video视频播放的坑

x5同层播放器（自动播放，点击播放时自动全屏）

x5视频行内播放

自动播放，iOS可以播放但无声音，Android部分机型可以

https://juejin.cn/post/6844903825002725383

微信h5 web 自动播放，预加载，重新播放

微信h5 web Android全屏播放，推出后无法继续播放

iOS h5禁止浏览器返回产生历史，location.replace

https://juejin.cn/post/6844903758241988621

小程序基本知识

openid标识用户

unionid标识企业下所有微信账号产品

小程序图片渲染，渲染动态二维码到图片上

小程序中无法绘制网络图片，需要先下载到临时文件夹
canvas渲染图片
借助微信提供的 canvasToTempFilePath 导出图片，最后再使用 saveImageToPhotosAlbum （需要授权）保存图片到本地
使用：小程序扫描二维码，需要在服务端转换成端url（32位长度）

小程序埋点统计

小程序工程化

实时编译 less 文件至相应目录
引入支持async，await的运行时文件
编译字体文件为base64 并生成相应css文件，方便使用
依赖分析哪些地方引用了npm包，将npm包打成一个文件，拷贝至相应目录

https://juejin.cn/post/6844903670589423623

小程序兼容性

日期解析无效

Date.parse(new Date()) // 小程序中实现，而在iOS 和 Android Web上没有实现

使用momentjs日期库来支持（按需引入，不要整个库引入）
使用微信小程序的SDK，wx.getSystemInfo判断API是否存在
使用小程序接口wx.canIUse判断对象是否可用
使用polyfill来支持小程序缺失的函数

https://www.jianshu.com/p/0eabd560b5a8

https://juejin.cn/post/6844903462442909710

移动端白屏定位

白屏原因可能是：

网络过慢，短暂白屏.3
JS框架执行渲染失败
如果是小程序，lodash 这种大型的库会导致加载不出来，可以尝试下能不能按需引入

一般来说，Web白屏就是请求未拉数据下来，此时会短暂白屏的。浏览器把html拉下来后，就会先执行inline JS标签（阻塞渲染），然后就是html和CSS的渲染逻辑了。如果是使用JS框架（如Vue或React），他们是使用JS动态生成的Document树，所以如果JS加载失败也会白屏。

查看控制台日志

很多Web环境都可以查看错误日志Devtool，iOS的Safari

为什么JS框架执行渲染会失败呢？

大量浏览器环境不支持ES6以上，有部分浏览器支持ES6环境，导致JS语法错误。（不同环境，JS的变量提升逻辑不太一样）
如果第一步，Babel把转换功能正常。也就是说，有部分页面出现，而部分组件不能出现。这时就是对应的组件JS代码出错，或者引用组件错误了。如果是小程序，会存在兼容性不支持JS函数功能，可以使用polyfill来支持小程序缺失的函数

这是因为浏览器一般都是ES5环境，而我们写的代码都是ES6和ES7，需要使用babel的工具把JS提取编译（转换可能更合适）为ES5的代码，而有些ES6特有的函数就使用polyfill支持，polyfill是一个功能函数集合，把ES6特有的功能用ES5的代码来实现。另外一个不用转换的方法，就是直接使用Babel的运行时解析，等于把Babel的转换逻辑移动到我们的程序运行时执行。

定位白屏bug的方法及其处理办法

查看是否是undefined。如果是自己的命名变量，很大几率是自己的代码问题，先注释相关代码，再运行。
如果undefined不是自己的命名变量，考虑是否是ES6转换到ES5的代码不支持。是否是Babel的配置问题，修正Babel配置
如果浏览器版本过旧，检查浏览器兼容 ”browserslist”: “> 0.25%, not dead”。放弃低版本浏览器吧。。
JS问题，也可能webpack配置的问题，检查下loader配置
非核心功能依赖的函数，考虑try catch捕抓一层

https://medium.com/@banyudu/%E5%89%8D%E7%AB%AF%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86%E6%8C%87%E5%8D%97-1-%E7%99%BD%E5%B1%8F-cf4568a09e1c

参考