移动端经常使用设置

时间 2019-11-17

标签移动经常使用设置栏目无线繁體版

原文原文链接

1.强制竖屏浏览 x5-orientationjavascript

2.强制全屏显示 x5-fullscreencss

3. uc 全屏显示html

screen -orientationjava

4,禁止电话和邮箱ios

5.font boostinggit

7.fixedgithub

方法一：头部根据html来定位，可是会有回弹web

ios的body 的overflow问题布局

通常把内容包一层flex

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

六、viewport + rem 实现

同时经过设置对应viewport的rem基准值，这种方式就能够像之前同样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：

 
         < 
         meta  
         name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport：

 
         < 
         meta  
         name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

这种兼容方案相对比较完美，适合新的项目，老的项目修改为本过大。
对于这种方案，能够看看《使用Flexible实现手淘H5页面的终端适配》
优势：

全部场景都能知足
一套代码，能够兼容基本全部布局

缺点：

老项目修改代价过大，只适用于新项目

七、伪类 + transform 实现

对于老项目，有没有什么办法能兼容1px的尴尬问题了，我的认为伪类+transform是比较完美的方法了。
原理是把原先元素的 border 去掉，而后利用 :before 或者 :after 重作 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新作的 border 绝对定位。
单条border样式设置：

 
         .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样式设置:

 
         .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 屏：

 
         if 
         (window.devicePixelRatio && devicePixelRatio >= 2){ 
        
         document.querySelector( 
         'ul' 
         ).className =  
         'scale-1px' 
         ; 
        
         }

优势：

全部场景都能知足
支持圆角(伪类和本体类都须要加border-radius)

缺点：

对于已经使用伪类的元素(例如clearfix)，可能须要多层嵌套