用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
用css3解决移动端页面自适应横屏竖屏的思考的更多相关文章
- 解决移动端页面滚动后不触发touchend事件
解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...
- js 横屏 竖屏 相关代码 与知识点
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- HTML5中判断横屏竖屏
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...
- 【转】Android 模拟器横屏竖屏切换设置
http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04 来源:设计与开发 ...
- Android之横屏竖屏显示问题
1.採用不同的布局文件 在res下创建目录layout-land 在该目录下写入的layout(xml文件)横屏的时候系统自己主动选择显示的layout 同理: 在res下创建目录layout-por ...
- vue手机端横屏竖屏切换
1.建一个空白的vue文件,添加上如下代码 data() { this.$router.go(-1) return {} } 2.在需要横屏竖屏切换的页面中加入如下代码: beforeMount( ...
- javascript判断手机旋转横屏竖屏
javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...
- Android横屏竖屏切换的问题
Android横屏竖屏切换的问题 http://blog.sina.com.cn/s/blog_77c632410101790w.html
- RK3288 6.0 双屏异显,横屏+竖屏【转】
本文转载自:http://blog.csdn.net/clx44551/article/details/78215730?locationNum=8&fps=1 RK3288 6.0 双屏异显 ...
随机推荐
- sessionStorage的使用方法
本篇是关于sessionStorage的使用方法的介绍,简单几行代码,实现sessionStorage,请大家查阅 (1)在需要设置sessionStorage的页面写如下代码可以存入sessionS ...
- IFC数据模式架构的四个概念层
IFC模型体系结构由四个层次构成, 从下到上依次是 资源层(Resource Layer).核心层(Core Layer).交互层(Interoperability Layer).领域层(Domain ...
- 将已有的Eclipse项目转化为Maven项目
将已有的Eclipse项目转化为Maven项目 我们之前在Eclipse IDE完成的Java命令行项目.Java Web项目也使用了构建工具--Ant,它帮助我们编译.运行Java源代码(无需我们自 ...
- hdu 1233 还是畅通project (克鲁斯卡尔裸题)
还是畅通project Time Limit: 4000/2000 MS (Java/Others) M ...
- HBase高速导入数据--BulkLoad
Apache HBase是一个分布式的.面向列的开源数据库.它能够让我们随机的.实时的訪问大数据.可是如何有效的将数据导入到HBase呢?HBase有多种导入数据的方法.最直接的方法就是在MapRed ...
- 2.2 Consumer API官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2.2 Consumer API 2.2.消费者API 随着0..0版本,我们已经增 ...
- 《ASP.NET》数据绑定—DropDownList、ListBox
DropDownList和ListBox实现两级联动功能.他们也能够将从后台数据库中搜选的出来的信息加以绑定.这里要实现的功能是在DropDownList中选择"省",然后让Lis ...
- ActivityChooserView-如何隐藏选择的应用图标
今天在修改一个问题的时候,用到了ActivityChooserView类,但是,这个类会自动显示两个按钮,一个是点击有下拉框的,一个是选择应用以后,显示应用图标的.因为应用图标跟当时的环境非常的不搭, ...
- 9.Spring Boot实战之配置使用Logback进行日志记录
转自:https://blog.csdn.net/meiliangdeng1990/article/details/54300227 Spring Boot实战之配置使用Logback进行日志记录 在 ...
- CSDN博客的文章分类和战略规划
CSDN原创文章已经有300多篇了,现在已经整理了好多个分类目录了. 今天,特别向大家介绍下,每个分类的含义和规划. CSDN博客是我的一个重要的自媒体,也是我的一个战略实践. 我会精心维护这个博客, ...