之前對於橫屏的webapp做過一些嘗試，但是始終不是很好的解決方案，前段時間又接觸了類似的需求，嘗試了感覺更好的解決方案。

這裡舉的例子還是平時常見的移動端的滑動頁面，也就是上下切換頁面的”H5“。

首先要做的準備：

1、html佈局

<div id="wrap">
			<div class="pageWrap">
				<div class="img11"><img data="images/1/plane.png" alt=""></div>
				<div class="img12 animated"><img data="images/1/tips.png" alt=""></div>
			</div>
			<div class="pageWrap">
				
			</div>
			
		</div>
 

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

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}

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

.pageWrap{ width: 100%; height: 100%; position: absolute; overflow: hidden; left: 0; top:0; -webkit-transition:all 1s; transition:all 1s;  transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
.pageWrap div{ display: none;}
.pageWrap:nth-child(1){ background: #42a8fe url(http://7xioxc.com1.z0.glb.clouddn.com/bigxm_1_house.jpg) no-repeat center bottom; background-size:cover; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}
.pageWrap:nth-child(1) div{ display: block;}
.pageWrap:nth-child(2){ background: #e22143 url(http://7xioxc.com1.z0.glb.clouddn.com/bigxm_2_bg2.jpg) no-repeat center bottom; background-size:cover;}




/* p1 */
.logo{ width:94px; position: absolute; left:50%; margin-left: -47px; top:23px; }
.img11{ width:97px; position: absolute; left:2%;  top:10%; }
.img12{ width: 190px; position: absolute; left: 50%; margin-left: -95px; bottom:85px;}
.img13{ width: 100%; position: absolute; left: 0; top:0;}
 

----------------------------------------------------------------------------------------------------------------------------------

準備好上面的內容之後，接下來就是要寫我們的js實現了。

通過js來得到寬高的值來判斷是豎屏還是橫屏，為什麼要這樣子呢？

因為不是所有的瀏覽器都支援orientation的方法，所以我就通過這個笨笨的方法來實現了。

（1）如果瀏覽器的寬度大於高度，說明是橫屏的，畫布的寬度 == 瀏覽器的寬度，所以wrap不需要旋轉。

$('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)'
		});

（2）如果瀏覽器的寬度小於高度，說明是豎的，畫布的寬度 == 瀏覽器的高度

$('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)'
		});

-------------------------------------------------

除了需要注意這一點之外，還要考慮到的是滑動頁面的時候的方向。

因為橫屏和豎屏的時候手指滑動的方向並不是一致的，所以手指滑動的事件也需要寫兩個情況。