关于移动端的一些tip

移动端的一些tip

开发相关

关于viewport

<meta name="viewport" content="name=value,name=value">
//
指令
每对键值对都是一个指令，（ppk 大神的叫法）如下总计共有6对：
width
    设置layout viewport的宽度（css px）
initial-scale 
    设置页面的初始缩放比例同时能够设置layout viewport的宽度
minimum-scale
    设置最小缩放比例（指用户可以缩小到多小）
maximum-scale
    设置最大缩放比例（指用户可以放大到多大）
height
    设置layout viewport的高度，但暂时不怎么被支持
user-scalable
    设置是否容许用户放大缩小。

当咱们的网页不使用viewport的时候网页在移动端显示的时候基本上看不清楚字体，为何呢？由于咱们将960px（当咱们不作设置的时候viewport会自动的把咱们的html给规定成980px）的内容压缩到320dpx（非css单位，在移动端中1px带至一个最小显示单位，一屏就是320px）。

解决方案

经过上述的例子咱们知道基本上 viewport 的默认宽度是980px，且浏览器会将者 viewport 大小的 html 文档塞进有限的设备宽度内（浏览器会动态计算文档的布局及内容），因此咱们看到的东西都很小。
那么咱们想要清除的看清文档内的内容怎么办 ，没错，缩小 viewport 的大小，什么原理？
当咱们缩小 viewport 的宽度的时候文档的宽度也对应的被缩小，即同样的设备宽度，我显示的东西少了（这时候浏览器从新计算文档布局及内容）能够看到的结果是字体被放大了，内容都被放大了！

详细解释

• [x] width
  能够用width来设置viewport的宽度，以替代那些不合适的默认宽度。咱们能够给其设定一个固定大小，但设定成device-width更加明智一些，这样咱们能够兼容不一样大小的屏幕。采用了以后就是咱们上面所说的效果，虽然是显示的东西变少了可是个人字体变大了！

• [x] initial-scale
  在移动设备上，用户有时会缩放，当页面缩放时，viweport的像素尺寸也会响应的改变，单css尺寸不会变。

  好比，在一个400px宽的Viewport中有一个元素，设定width: 100px;，这时该元素就横跨了1/4的屏幕。若是用户把页面放大到两倍大小，这时Viewport宽度变成了200px，但元素仍然宽100个CSS像素。这时这个元素就占了半个屏幕了。

滚动方式

页面的滚动位置分为两种，一种是滚动body，另外一种固定body的高度为100%,在main中滚动。

• 滚动body：页面的地址会随着body的滚动隐藏起来，而且在android设备中，滚动body会更加的流畅。(把body设置为overflow就好了)这种状况比较适合长列表页面，整个页面除了herder和footer以外都须要滚动，但不少时候咱们只但愿页面的某个元素滚动，这个时候就采起第二种布局方式。
• body高度设置为100%：这种方法有许多种实现方式
  • [x] fixed定位 -- 头部尾部都设置为fixed定位
  • [x] absolute定位
  • [x] flex定位
  这里面也存在一些须要注意的地方，在移动端，若是fixed定位结点后面紧接着跟着兴地结点是可滚动的（也就是设置了overflow为true），那么fixed结点会被其后的兄弟结点遮住

fixed 与 input

在移动端开发中，在有input元素的标签页中使用fixed定位时会出现一些问题。 在ios上，当点击input标签获取焦点唤起软键盘的时候fixed定位会暂时失效，或者理解为变为了absolute定位，在含有滚动的页面会和其余结点一块儿滚动。因此在含有input元素的页面中使用absolute更好。

compositionstart和compositionend事件

在开发中咱们常常要对表单元素进行输入限制，好比特殊的字符（也有xss的防范功能），咱们会监听input事件。可是，在ios中input事件会截断非直接输入，好比：输入[焦贵彬]中间过程当中会输入拼音，每次输入一个字母都会触发input事件，然而在没有点击选定按钮以前都会截断，也就是会触发不少次。这时候就须要咱们说的两个事件。

compositionstart 事件在用户开始进行非直接输入的时候触发，而在非直接输入结束，也即用户点选候选词或者点击「选定」按钮以后，会触发 compositionend 事件。

关于性能

使用css3动画，开启硬件加速（存在须要注意的地方）

css3动画会新建一个图层，另外部分css3动画会调用GPU，获得性能上的提高.

触发

• 3d 透视或视图变换（perspective transform）css属性
• 使用加速视频解码的元素
• 拥有3d（webGL）上下文或2d上下文的元素（carvers）
• 混合插件（如flash）
• 对本身的opacity作css动画或使用一个动画webkit变换元素
• 拥有加速 CSS 过滤器的元素
• 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在本身的层里)
• 元素有一个 ** z-index ** 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

上面有提到须要注意一些地方，就是他会将后面的一些不须要新建图层的元素新建图层，使性能不只没有提高反而出现了一些隐患！

如何来看到css3动画新建的图层

在chrome 中选择open drawer（版本不一样会不同，有些版本下直接在控制台的设置中 more tools --> rednering）选择rendering，而后选择打开layer boerders ，如今在咱们的浏览器上就能够看到一些黄色的框框，这个就是咱们所谓的复合层，表示被放到了一个新的图层中渲染。

隐患

注意触发新建图层的最后一条，它的意思是若是有一个元素，它的兄弟元素复合层中渲染，而这个兄弟元素的z-index较小，那么这个元素（不论是否应用了硬件式加速）也会被放到复合层中，那么浏览器颇有可能给复合层以后的全部相对或绝对定位的元素都建立一个复合层来渲染，因而就有了这样的情形-- 页面上不少元素都启用了GPU加速，反而致使了页面很是的卡顿

解决方案

• 在启用css3动画的元素上增长position：relative和z-index：1，这种作法的原理是认为提高动画元素的z-index，让浏览器知道这个元素的层序，就不会很傻逼的把其余z-index比他高的元素耶弄到复合层中了

• 上面说了一些须要注意的地方，可是整体来讲咱们仍是会采用一些css3的动画去调用GPU，好比translate-Z：0；但是此时咱们并非要旋转，这是一种欺骗浏览器的行为。此时咱们能够关注一下will-change
  ```
  /* 关键字值 /
  will-change: auto;
  will-change: scroll-position; // 告知浏览器会有滚动
  will-change: contents; // 告知浏览器内容或动画变化了
  will-change: transform; / 示例 /
  will-change: opacity; / 示例 /
  will-change: left, top; / 两个 示例 */

  /* 全局值 */
  will-change: inherit;
  will-change: initial;
  will-change: unset;
  ```

适当的使用touch事件代替click事件

• touch事件触发的流程：touchstart -> touchmove -> touchend -> click
• 触发时机：click在dom上手指触摸开始，且手指不曾在屏幕上移动（某些浏览器容许移动一个很是小的值）且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短才能触发。

减小媒体查询

若是使用的是rem的单位（至关于根元素的字体大小来缩放）由于这样有两个明显的缺点 1.适配屏幕的尺寸不是连续的 2. 在本身的css文件中添加打断的这样查询代码。增长了css文件的体积。

• 参考淘宝的移动端的页面适配规则，使用js获取客户端的宽度，根据设计稿原型动态计算计算font-size的值

other

• 避免使用css渐变阴影效果
• 不滥用Web字体
  Web字体须要下载，解析，重绘当前页面，尽可能减小使用。

参考

• 饿了么前端
• 张鑫旭博客