1、IE下object标签穿透带有蒙层的toast, loading等一些组件，设置z-index层级无效，
解决方案：iframe可以覆盖object, div可以覆盖iframe，因此可做组件下加同层大小位置的透明iframe，既可覆盖object穿透问题；
<iframe scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
2、alpha通道图片，指的是8位灰度通道，256级通道，以透明度区分：透明，不透明，半透明（白-不透明，黑-透明，灰-明）。
3、防止双击选中文本，给span或其他的元素加上这个属性就可以了，onselectstart=“return false”
页面布局
viewport
设备像素：物理像素和独立像素（css像素）
像素密度：PPI表示设备每英寸所拥有的物理像素数目，这个值越高越清晰。
PPI = 开平方根（屏幕分辨率宽的平方 + 屏幕分辨率高的平方）／ 4；
APPLE定义的retina屏幕，电脑PPI>200, 平板>260, 手机>300,最早出现在iphone4;
设备像素比：物理像素与css像素的比例；（iphone从4开始retina为2）。
3个viewport:
1、Layout Viewport: 移动设备为了不让看客户端页面太窄而出现页面遮盖和错乱情况，默认把viewport设为较宽值，如980像素等。如同980像素分辨率显示器打开页面一样。这种默认的viewport就是layout viewport。
可以通过document.documentElement.clientWidth和clientHeight获取。
2、Visual Viewport：webview可视区域，window.innerWidth和innerHeight。可因缩小放大，度量值发生改变。
3、Ideal Viewport（即理想视图、独立像素密度视图）：不同设备下的宽度。
为了不让用户缩放页面而确保页面不出现滚动条，通常将layout viewport设置为ideal viewport大小。
<meta name="viewport" content="width=device-width, initial-scale=1" />
这样即让layout viewport设置为ideal viewport。
// device-width: 设备独立像素密度
Q： 如果实现PC和移动一套布局适用
图片模糊问题
1个位图像素和1个设备物理像素对等是清晰的，如果retina屏幕，会使图片1个像素分给多个物理像素，会导致物理像素就近去色，从而模糊。（因此需要将图片按retina倍数等比像素去做图设计）
移动页面布局方式汇总：
1、设置页面显示像素宽度width等于物理像素device-width, 以通常680设备像素开发。
2、百分比布局：百分比width设置，height使用margin, padding的百分比(这两个属性也是相对父元素的width)。
3、滚屏布局，设置body,html(height: 100%). 设置页面元素容器height: 100% overflow: hidden, sub元素height: 1000%, 结合touchstart, touchmove, touchend事件处理，根据手指在页面的touch的pageY的值，end与start值做对比，根据end事件+，-值，对sub页面的transform: translateY(+|-nPage%)。
4、媒体查询：根据设备的临界像素限定设置、根据页面内容元素宽度限定设置。可以link引入，也可以放在style。
5、设置页面缩放属性zoom，基于标准像素宽度，js获取设备像素宽度，得出缩放比例，重置zoom的缩放值。(之前直接使用px布局的情况）
6、使用rem元素布局，设置页面1rem=xxPX, 以rem布局。
7、移动设备尽可能精简模块，可以改变交互。