码迷,mamicode.com
首页 > 移动开发 > 详细

移动端页面自适应横屏竖屏解决方法思考

时间:2015-06-30 18:31:56      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:移动网页   webapp   布局   css3   javascript   

之前对于横屏的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




版权声明:本文为博主原创文章,未经博主允许不得转载。

移动端页面自适应横屏竖屏解决方法思考

标签:移动网页   webapp   布局   css3   javascript   

原文地址:http://blog.csdn.net/wuweitiandian/article/details/46697053

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!