移动端始终横屏及rem 适配

移动端始终横屏及rem 适配

      这几天做一个项目需要始终横屏，然而找了许多资料，看到H5网页感觉并不能直接控制始终横屏，而是需要使用css3配合JS控制横屏，后面因为适配原因用到rem，于是为了方便和学习，在这结合资料记一个学习笔记。

下面上demo：

css代码：

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
html{-webkit-tap-highlight-color:rgba(255,255,255,0);
-webkit-appearance:none;
-webkit-transform:translate3d(0, 0, 0);}
img{ width: 100%; display: block;}

/* main css */
body{ width: 100%; height: 100%; position: relative; left:0; top: 0; background: #000; overflow: hidden;}
#wrap{ height: 100%; position: absolute; left: 50%; top:50%; overflow: hidden;}
.content{ width: 1000px; height: 640px; color: #000; position: absolute; left:50%; top:50%;}
.pageWrap{ width: 100%; height: 100%; position: absolute; overflow: hidden; left: 0; top:0;transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
.pageWrap{ background: #42a8fe url(../img/mzBg.png) no-repeat center bottom; background-size:cover; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}

html代码：

	
		
     
     
		
     
     
		<script type="text/javascript" src="js/rem.js" ></script>
		 rel="stylesheet" href="css/main1.css">
		 
		
	

	 
 
		
     
     

			
      
      

				
       
       

					
						
        
        
测试的内容11111111111
				
       
       

			
      
      

		
     
     
		 
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/main1.js"></script>
 
	

js 代码：

 1.横屏 

var wrap = $('#wrap');

var ww = window.innerWidth;
var wh = window.innerHeight;
var sec = $('.pageWrap'),
	canswipe = ww*0.1,
	hadDown = false;

$('body').css({
	'width':ww+'px',
	'height':wh+'px'
});
changeScene();



window.onresize = function(){
	canswipe = ww*0.1;
	//调整画布的位置和大小
	changeScene();
}

function changeScene(){
	var iniW = 1000,
		iniH = 640,
		tarW = 0,
		tarH = 0;
	ww = window.innerWidth;
	wh = window.innerHeight;

	
	if(ww > wh){		//如果浏览器的宽度大于高度，说明是横屏的，画布的宽度 == 浏览器的宽度
		console.log('浏览器的宽度大于高度');
		tarW = ww;
		tarH = tarW*iniH/iniW;
		$('body').css({
			'width':ww+'px',
			'height':wh+'px'
		});

		wrap.css({
			'width':ww + 'px',
			'height':wh + 'px',
			'transform':'translate3d(-50%,-50%,0)',
			'-webkit-transform':'translate3d(-50%,-50%,0)'
		});
		

	}else if(ww <= wh){	//如果浏览器的宽度小于高度，说明是竖的，画布的宽度 == 浏览器的高度
		console.log('浏览器的宽度小于高度');
		tarW = wh;
		tarH = tarW*iniH/iniW;

		$('body').css({
			'width':ww+'px',
			'height':wh+'px'
		});


		wrap.css({
			'width':wh + 'px',
			'height':ww + 'px',
			'transform':'translate3d(-50%,-50%,0) rotate(90deg)',
			'-webkit-transform':'translate3d(-50%,-50%,0) rotate(90deg)'
		});

		
	}

}

 2.rem适配

 

(function (doc, win) {
var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
    	if(docEl.clientWidth>docEl.clientHeight){
    		var clientWidth = docEl.clientHeight;
    	}else{
    		var clientWidth = docEl.clientWidth;
    	}
//    var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

以上就是这些内容了。