移动端常用设置
1.强制竖屏浏览 x5-orientation
2.强制全屏显示 x5-fullscreen
3. uc 全屏显示
screen -orientation
4,禁止电话和邮箱
5.font boosting
7.fixed
方法一： 头部根据html来定位，但是会有回弹
ios的body 的overflow问题
一般把内容包一层
8.新老flex
弹性布局：老版比新版的兼容性好
新版：display:flex;
主轴：水平/垂直/反序 （注意如果高度或者宽度很大，将会从最下面开始反序）
flex-direction:row/colmun/row-reverse/colmun-reverse
水平富余空间管理：justify-content:flex-strat/flex-end/center/space-between/space-around
垂直富余空间管理：align-items:flex-strat/flex-end/center/space-between/space-around
弹性盒模型--box
子类 ：flex:1
元素的具体位置设置：
order:1,2,3,4....数字越小，越靠前，可以接受负数，排列位置
老版： display:-webkit-box
水平：
-webkit-box-orient:horizontal/
垂直：
-webkit-box-orient:verical/
水平反序：-webkit-box-direction:reverse
垂直反序：-webkit-box-direction:normal
注意：老版的高度和宽度不影响反序的位置，都是从初始开始
水平富余空间管理:-webkit-box-pack:start/end/center/justify(相当于space-between)
垂直富余空间管理:-webkit-box-align:start/end/center/justify(相当于space-between)
弹性盒模型--box
-webkit-box-flex:1
元素的具体位置设置：
-webkit-box-group:1,2,3,4....数字越小，越靠前，默认最小值为1，排列位置
以下内容转载自http://www.cnblogs.com/lhb25/p/seven-method-for-1px-retina-screen.html
6、viewport + rem 实现
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：
|
1
|
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> |
在devicePixelRatio = 3 时，输出viewport：
|
1
|
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no"> |
这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。
对于这种方案，可以看看《使用Flexible实现手淘H5页面的终端适配》
优点：
- 所有场景都能满足
- 一套代码，可以兼容基本所有布局
缺点：
- 老项目修改代价过大，只适用于新项目
7、伪类 + transform 实现
对于老项目，有没有什么办法能兼容1px的尴尬问题了，个人认为伪类+transform是比较完美的方法了。
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
单条border样式设置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.scale-1px{ position: relative; border:none;}.scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;} |
四条boder样式设置:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.scale-1px{ position: relative; margin-bottom: 20px; border:none;}.scale-1px:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top;} |
最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏：
|
1
2
3
|
if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector('ul').className = 'scale-1px';} |
优点：
- 所有场景都能满足
- 支持圆角(伪类和本体类都需要加border-radius)
缺点：
- 对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套
