用css3解决移动端页面自适应横屏竖屏的思考

之前对于横屏的webapp做过一些尝试，但是始终不是很好的解决方案，前段时间又接触了类似的需求，尝试了感觉更好的解决方案。

之前的方法写的博客：移动网页横竖屏兼容适应的一些体会

这里举的例子还是平时常见的移动端的滑动页面，也就是上下切换页面的”H5“。

首先要做的准备：

1、html布局

[html]view plaincopy

1. <div >
2. <div class="pageWrap">
3. <div class="img11"><img data="images/1/plane.png" alt=""></div>
4. <div class="img12 animated"><img data="images/1/tips.png" alt=""></div>
5. </div>
6. <div class="pageWrap">
7. </div>
8. </div>

2、然后是css样式：

[css]view plaincopy

1. /*
2. YUI 3.18.1 (build f7e7bcb)
3. Copyright 2014 Yahoo! Inc. All rights reserved.
4. Licensed under the BSD License.
5. http://yuilibrary.com/license/
6. */
7. 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}
8. img{ width: 100%; display: block;}
9. /* main css */
10. body{ width: 100%; height: 100%; position: relative; left:0; top: 0; background: #000; overflow: hidden;}
11. #wrap{ height: 100%; position: absolute; left: 50%; top:50%; overflow: hidden;}
12. .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);}
13. .pageWrap div{ display: none;}
14. .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);}
15. .pageWrap:nth-child(1) div{ display: block;}
16. .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;}
17. /* p1 */
18. .logo{ width:94px; position: absolute; left:50%; margin-left: -47px; top:23px; }
19. .img11{ width:97px; position: absolute; left:2%; top:10%; }
20. .img12{ width: 190px; position: absolute; left: 50%; margin-left: -95px; bottom:85px;}
21. .img13{ width: 100%; position: absolute; left: 0; top:0;}

上面的样式包含了reset.css以及页面的样式，主要关注的地方是body的样式和#wrap、.pageWrap的样式。页面是按照横屏来写的，当为竖屏时，需要把页面旋转90度。

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

准备好上面的内容之后，接下来就是要写我们的js实现了。

通过js来得到宽高的值来判断是竖屏还是横屏，为什么要这样子呢？

因为不是所有的浏览器都支持orientation的方法，所以我就通过这个笨笨的方法来实现了。

（1）如果浏览器的宽度大于高度，说明是横屏的，画布的宽度 == 浏览器的宽度，所以wrap不需要旋转。

[javascript]view plaincopy

1. $('body').css({
2. 'width':ww+'px',
3. 'height':wh+'px'
4. });
5. wrap.css({
6. 'width':ww + 'px',
7. 'height':wh + 'px',
8. 'transform':'translate3d(-50%,-50%,0)',
9. '-webkit-transform':'translate3d(-50%,-50%,0)'
10. });

（2）如果浏览器的宽度小于高度，说明是竖的，画布的宽度 == 浏览器的高度

[javascript]view plaincopy

1. $('body').css({
2. 'width':ww+'px',
3. 'height':wh+'px'
4. });
5. wrap.css({
6. 'width':wh + 'px',
7. 'height':ww + 'px',
8. 'transform':'translate3d(-50%,-50%,0) rotate(90deg)',
9. '-webkit-transform':'translate3d(-50%,-50%,0) rotate(90deg)'
10. });

这个时候，就需要把页面旋转过来了。

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

除了需要注意这一点之外，还要考虑到的是滑动页面的时候的方向。

因为横屏和竖屏的时候手指滑动的方向并不是一致的，所以手指滑动的事件也需要写两个情况。

完整的测试代码可以在百度云盘中下载：http://pan.baidu.com/s/1gdix9QF