对于移动端小点的总结

移动端笔记

  1. 在移动端使用canvas的时候，看的不是画布的大小，而是当前屏幕的大小，因此只要改变当前屏幕的宽高，即可做到让画布适应各个手机；

  2. devicePixelRatio，在安卓和iPhone的数值是不一样的，在适应iPhone6/7/8和iPhone6/7/8 plus的时候需要特别的注意这个，在项目中可以不改变这个的数值，根据屏幕的宽度来得知这个是哪种类型的，从而再乘以一个倍数来重新计算当前屏幕的宽高（代码回公司再贴，哈哈哈）；

  3. 在移动端布局上，如果遇到弹出键盘挤压当前页面，需要将根部标签的高度设置为当前屏幕的高度,才能在计算的时候不会再次挤压。

  4. 在遇到输入完成后键盘收起的时候，也仍需注意第三个的问题，需要计算好屏幕的高度；

  5. 由于是移动端，因此在书写一些css的时候，尽可能是用一些缩写的方式，例如背景的可以把所有的属性都写在一个而不是写很多条；

  6. 在利用一些css新属性的时候可以查询一下是否兼容性可以

  7. 在书写样式的时候，还发现如果当前div利用了背景渐变，则字体颜色是不能渐变的了

  8. 在边框上也是，一旦开启渐变，则边框不会有border-radius这个属性生效，做不到圆角

  9. 在调试真机的时候，则可以在谷歌下载一个二维码生成插件，利用连着同一WiFi（即网段相同），扫码即可调试

  10. 定义在利用flex居中在真机测试有问题，要用传统方式居中（left:50%;transform:tranlate(-50%)，这种）

  11. 弹出键盘遇到挤压，在失去焦点的时候再次获取组件的高度

  12. IOS滑动滚动不流畅时候，不应该使用over-flow:scroll;而是应该用touch-scroll(记得是这个)；