移动端定屏适配

1. 简述：

		项目中经常遇到某些页面铺满全屏，切换整屏的需求，适配问题随之而来，比如 6s 标准16：9，以6s 做为标准模板，粪叉偏长，pad 和 6p等偏宽，页面中某些元素根据屏幕定位时候，在不同的机型预览，效果不同，美观性很差，在不断尝试中找到了一下解决方案，效果还不错

2. 函数体

		//获取屏幕宽高,并计算屏幕比例
        var myHeight = $(window).height()
        var myWidth = $(window).width()
        var per = myHeight/myWidth
         //宽屏 高配宽
        if(per<=16/9){
            $(mySelector).css({
                'width':myHeight/16*9,
                'left':(myWidth-myHeight/16*9)/2,
                'top':(myHeight-myHeight)/2,
                'height':myHeight
            })     
        }else{
			// 长屏 宽配高
            $(mySelector).css({
                'height':myWidth/9*16,
                'top':(myHeight-myWidth/9*16)/2,
                'width':myWidth,
                'left':(myWidth-myWidth)/2
            }) 
        }

3.根字号设定

适配中包括字号适配，大屏大字，小屏小字。（在Pad中看到的字号要比6S中的字号大）
使用rem适配虽然可以保证dom元素大小适配，但是在pad中文字由于rem适配变大常常会超出其区域，某些情况下会挤掉或者遮挡其他元素的位置，处理方式如下

修改后的rem.js：

//1.获取屏幕像素比的倒数
        var num = 1/window.devicePixelRatio;
        //2.动态创建适口标签
        var meta=document.createElement('meta');
        meta.setAttribute('name','viewport');
        meta.setAttribute('content','width=device-width, user-scalable=no, initial-scale='+num+', maximum-scale='+num+', minimum-scale='+num+'');
        document.head.appendChild(meta);
        3.设置html字体,为整个页面的10/1
            var myHeight = $(window).height()
			var myWidth = $(window).width()

			//宽屏 高配宽 长屏 宽配高 处理PC 定屏和Pad定屏
			var per = myHeight/myWidth
			if(per<=16/9){ 
				//如果是pad 或者PC网页等打开移动端页面，自动以安全区重新计算根字号，防止文字过大溢出
				document.documentElement.style.fontSize=(myHeight/16*9)/10+'px';
			}else{
				document.documentElement.style.fontSize=window.innerWidth/10+'px';							
			}

以上方案解决了定屏 移动端页面的适配问题
如非定屏，即页面可滑动 单独使用以下rem.js 即可

 //1.获取屏幕像素比的倒数
        var num = 1/window.devicePixelRatio;
        //2.动态创建适口标签
        var meta=document.createElement('meta');
        meta.setAttribute('name','viewport');
        meta.setAttribute('content','width=device-width, user-scalable=no, initial-scale='+num+', maximum-scale='+num+', minimum-scale='+num+'');
        document.head.appendChild(meta);
        3.设置html字体,为整个页面的10/1
            var myHeight = $(window).height()
			var myWidth = $(window).width()
			document.documentElement.style.fontSize=window.innerWidth/10+'px';