移动端始终横屏及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代码：

 html{font-size: 100px;}body{font-size: 0.28rem;}  
测试的内容11111111111
  

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);

以上就是这些内容了。