Open cqupt-yifanwu opened 7 years ago
<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 的宽度的时候文档的宽度也对应的被缩小，即一样的设备宽度，我显示的东西少了（这时候浏览器重新计算文档布局及内容）可以看到的结果是字体被放大了，内容都被放大了！
比如，在一个400px宽的Viewport中有一个元素，设定width: 100px;，这时该元素就横跨了1/4的屏幕。如果用户把页面放大到两倍大小，这时Viewport宽度变成了200px，但元素仍然宽100个CSS像素。这时这个元素就占了半个屏幕了。
页面的滚动位置分为两种，一种是滚动body，另一种固定body的高度为100%,在main中滚动。
body高度设置为100%：这种方法有许多种实现方式
这里面也存在一些需要注意的地方，在移动端，如果fixed定位结点后面紧接着跟着兴地结点是可滚动的（也就是设置了overflow为true），那么fixed结点会被其后的兄弟结点遮住
在移动端开发中，在有input元素的标签页中使用fixed定位时会出现一些问题。 在ios上，当点击input标签获取焦点唤起软键盘的时候fixed定位会暂时失效，或者理解为变为了absolute定位，在含有滚动的页面会和其他结点一起滚动。所以在含有input元素的页面中使用absolute更好。
在开发中我们经常要对表单元素进行输入限制，比如特殊的字符（也有xss的防范功能），我们会监听input事件。但是，在ios中input事件会截断非直接输入，比如：输入[焦贵彬]中间过程中会输入拼音，每次输入一个字母都会触发input事件，然而在没有点击选定按钮之前都会截断，也就是会触发很多次。这时候就需要我们说的两个事件。
compositionstart 事件在用户开始进行非直接输入的时候触发，而在非直接输入结束，也即用户点选候选词或者点击「选定」按钮之后，会触发 compositionend 事件。
css3动画会新建一个图层，另外部分css3动画会调用GPU，得到性能上的提升. 触发 3d 透视或视图变换（perspective transform）css属性 使用加速视频解码的元素 拥有3d（webGL）上下文或2d上下文的元素（carvers） 混合插件（如flash） 对自己的opacity做css动画或使用一个动画webkit变换元素 拥有加速 CSS 过滤器的元素 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里) 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
css3动画会新建一个图层，另外部分css3动画会调用GPU，得到性能上的提升.
上面有提到需要注意一些地方，就是他会将后面的一些不需要新建图层的元素新建图层，使性能不仅没有提升反而出现了一些隐患！
在chrome 中选择open drawer（版本不同会不一样，有些版本下直接在控制台的设置中 more tools --> rednering）选择rendering，然后选择打开layer boerders ，现在在我们的浏览器上就可以看到一些黄色的框框，这个就是我们所谓的复合层，表示被放到了一个新的图层中渲染。
注意触发新建图层的最后一条，它的意思是如果有一个元素，它的兄弟元素复合层中渲染，而这个兄弟元素的z-index较小，那么这个元素（不管是否应用了硬件式加速）也会被放到复合层中，那么浏览器很有可能给复合层之后的所有相对或绝对定位的元素都创建一个复合层来渲染，于是就有了这样的情形-- 页面上很多元素都启用了GPU加速，反而导致了页面非常的卡顿
上面说了一些需要注意的地方，但是总体来说我们还是会采用一些css3的动画去调用GPU，比如translate-Z：0；可是此时我们并不是要旋转，这是一种欺骗浏览器的行为。此时我们可以关注一下will-change
/* 关键字值 */ will-change: auto; will-change: scroll-position; // 告知浏览器会有滚动 will-change: contents; // 告知浏览器内容或动画变化了 will-change: transform; /* <custom-ident>示例 */ will-change: opacity; /* <custom-ident>示例 */ will-change: left, top; /* 两个<animateable-feature>示例 */ /* 全局值 */ will-change: inherit; will-change: initial; will-change: unset;
如果使用的是rem的单位（相当于根元素的字体大小来缩放）因为这样有两个明显的缺点 1.适配屏幕的尺寸不是连续的 2. 在自己的css文件中添加打断的这样查询代码。增加了css文件的体积。
移动端的一些tip
开发相关
关于viewport
当我们的网页不使用viewport的时候网页在移动端显示的时候基本上看不清楚字体，为什么呢？因为我们将960px（当我们不做设置的时候viewport会自动的把我们的html给规定成980px）的内容压缩到320dpx（非css单位，在移动端中1px带至一个最小显示单位，一屏就是320px）。
解决方案
通过上述的例子我们知道基本上 viewport 的默认宽度是980px，且浏览器会将者 viewport 大小的 html 文档塞进有限的设备宽度内（浏览器会动态计算文档的布局及内容），所以我们看到的东西都很小。 那么我们想要清除的看清文档内的内容怎么办 ，没错，缩小 viewport 的大小，什么原理？ 当我们缩小 viewport 的宽度的时候文档的宽度也对应的被缩小，即一样的设备宽度，我显示的东西少了（这时候浏览器重新计算文档布局及内容）可以看到的结果是字体被放大了，内容都被放大了！
详细解释
滚动方式
页面的滚动位置分为两种，一种是滚动body，另一种固定body的高度为100%,在main中滚动。
body高度设置为100%：这种方法有许多种实现方式
这里面也存在一些需要注意的地方，在移动端，如果fixed定位结点后面紧接着跟着兴地结点是可滚动的（也就是设置了overflow为true），那么fixed结点会被其后的兄弟结点遮住
fixed 与 input
在移动端开发中，在有input元素的标签页中使用fixed定位时会出现一些问题。 在ios上，当点击input标签获取焦点唤起软键盘的时候fixed定位会暂时失效，或者理解为变为了absolute定位，在含有滚动的页面会和其他结点一起滚动。所以在含有input元素的页面中使用absolute更好。
compositionstart和compositionend事件
在开发中我们经常要对表单元素进行输入限制，比如特殊的字符（也有xss的防范功能），我们会监听input事件。但是，在ios中input事件会截断非直接输入，比如：输入[焦贵彬]中间过程中会输入拼音，每次输入一个字母都会触发input事件，然而在没有点击选定按钮之前都会截断，也就是会触发很多次。这时候就需要我们说的两个事件。
关于性能
使用css3动画，开启硬件加速（存在需要注意的地方）
上面有提到需要注意一些地方，就是他会将后面的一些不需要新建图层的元素新建图层，使性能不仅没有提升反而出现了一些隐患！
如何来看到css3动画新建的图层
在chrome 中选择open drawer（版本不同会不一样，有些版本下直接在控制台的设置中 more tools --> rednering）选择rendering，然后选择打开layer boerders ，现在在我们的浏览器上就可以看到一些黄色的框框，这个就是我们所谓的复合层，表示被放到了一个新的图层中渲染。
隐患
注意触发新建图层的最后一条，它的意思是如果有一个元素，它的兄弟元素复合层中渲染，而这个兄弟元素的z-index较小，那么这个元素（不管是否应用了硬件式加速）也会被放到复合层中，那么浏览器很有可能给复合层之后的所有相对或绝对定位的元素都创建一个复合层来渲染，于是就有了这样的情形-- 页面上很多元素都启用了GPU加速，反而导致了页面非常的卡顿
解决方案
上面说了一些需要注意的地方，但是总体来说我们还是会采用一些css3的动画去调用GPU，比如translate-Z：0；可是此时我们并不是要旋转，这是一种欺骗浏览器的行为。此时我们可以关注一下will-change
适当的使用touch事件代替click事件
减少媒体查询
如果使用的是rem的单位（相当于根元素的字体大小来缩放）因为这样有两个明显的缺点 1.适配屏幕的尺寸不是连续的 2. 在自己的css文件中添加打断的这样查询代码。增加了css文件的体积。
other
参考