用css3解決移動端頁面自適應橫屏豎屏的思考

之前對於橫屏的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>

2、然后是css樣式：

 

 

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

上面的樣式包含了reset.css以及頁面的樣式，主要關注的地方是body的樣式和#wrap、.pageWrap的樣式。頁面是按照橫屏來寫的，當為豎屏時，需要把頁面旋轉90度。

 

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

准備好上面的內容之后，接下來就是要寫我們的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)'
        });

這個時候，就需要把頁面旋轉過來了。

 

 

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

 

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

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

完整的測試代碼可以在百度雲盤中下載：http://pan.baidu.com/s/1gdix9QF