移动端页面自适应横屏竖屏解决办法思考 - Web前端当前位置:& &&&移动端页面自适应横屏竖屏解决办法思考移动端页面自适应横屏竖屏解决办法思考&&网友分享于：&&浏览：0次移动端页面自适应横屏竖屏解决方法思考之前对于横屏的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 class=&pageWrap&&
2、然后是css样式：
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD 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:border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style: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:font-size:font-weight:*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
img{ width: 100%; display:}
/* main css */
body{ width: 100%; height: 100%; position: left:0; top: 0; background: #000; overflow:}
#wrap{ height: 100%; position: left: 50%; top:50%; overflow:}
.pageWrap{ width: 100%; height: 100%; position: overflow: 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:}
.pageWrap:nth-child(1){ background: #42a8fe url(1.z0./bigxm_1_house.jpg) no- background-size: transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}
.pageWrap:nth-child(1) div{ display:}
.pageWrap:nth-child(2){ background: #e22143 url(1.z0./bigxm_2_bg2.jpg) no- background-size:}
.logo{ width:94 position: left:50%; margin-left: -47 top:23 }
.img11{ width:97 position: left:2%;
top:10%; }
.img12{ width: 190 position: left: 50%; margin-left: -95 bottom:85}
.img13{ width: 100%; position: 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)'
这个时候，就需要把页面旋转过来了。
-------------------------------------------------
除了需要注意这一点之外，还要考虑到的是滑动页面的时候的方向。
因为横屏和竖屏的时候手指滑动的方向并不是一致的，所以手指滑动的事件也需要写两个情况。
完整的测试代码可以在百度云盘中下载：/s/1gdix9QF
版权声明：本文为博主原创文章，未经博主允许不得转载。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有[HTML5] HTML5中判断横屏竖屏 | IT知识库
-& 正文阅读
[HTML5]HTML5中判断横屏竖屏
HTML5中判断横屏竖屏
在移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。这里有两种方法：一：CSS判断横屏竖屏写在同一个CSS中123456@media screen and (orientation: portrait) {&&/*竖屏 css*/}@media screen and (orientation: landscape) {&&/*横屏 css*/}分开写在2个CSS中竖屏1&link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"&横屏1&link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"&二：JS判断横屏竖屏12345678910//判断手机横竖屏状态：window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {&&&&&&&&if (window.orientation === 180 || window.orientation === 0) {&&&&&&&&&&&&alert('竖屏状态！');&&&&&&&&}&&&&&&&&if (window.orientation === 90 || window.orientation === -90 ){&&&&&&&&&&&&alert('横屏状态！');&&&&&&&&}&&&&&}, false);//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。屏幕方向对应的window.orientation值：ipad,iphone： 90 或 -90 横屏ipad,iphone： 0 或180 竖屏Andriod：0 或180 横屏Andriod： 90 或 -90 竖屏
加: 22:32:41&
更: 22:32:58&
&&网站联系: qq: email:&温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
在onConfigurationChanged(Configuration newConfig)方法内添加如下代码： int width = getWindow().getWindowManager().getDefaultDisplay().getWidth() //获取屏幕的宽 int height =&getWindow().getWindowManager().getDefaultDisplay().getHeight() //获取屏幕的高判断--如果宽大于高==横屏判断--如果宽小于高==竖屏
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'android如何判断当前是横屏还是竖屏',
blogAbstract:'在设置了切换横竖屏的声明后，会调用onConfigurationChanged(Configuration newConfig)方法而不是oncreate（）在onConfigurationChanged(Configuration newConfig)方法内添加如下代码：\tint width = getWindow().getWindowManager().getDefaultDisplay().getWidth() //获取屏幕的宽',
blogTag:'android',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:3,
publishTime:3,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}我们都知道给Activity设置全屏有在主题中设置，有在代码中设置的方式。那么该怎么获得当前是否全屏呢？网上有很多文章都用的是同一个方法，这个方法我经过测试基本处于废物级别，我的是4.4.4无法使用网上流传的方法。我下面给出我自己的一个实现。
* @param activity
* @return 判断当前手机是否是全屏
public static boolean isFullScreen(Activity activity) {
int flag = activity.getWindow().getAttributes().
if((flag & WindowManager.LayoutParams.FLAG_FULLSCREEN)
== WindowManager.LayoutParams.FLAG_FULLSCREEN) {
return true;
return false;
设置全屏的方法2种
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN ,
WindowManager.LayoutParams. FLAG_FULLSCREEN);//全屏
取消全屏的方法
getWindow().clearFlags( WindowManager.LayoutParams.FLAG_FULLSCREEN);
判断当前是否是竖屏
* 判断当前屏幕是否是横屏
* @param activity
public static boolean isVerticalScreen(Activity activity) {
int flag = activity.getResources().getConfiguration().
if (flag == 0) {
return false;
return true;
附：Android系统自带样式
android:theme="@android:style/Theme.Dialog" 将一个Activity显示为能话框模式&android:theme="@android:style/Theme.NoTitleBar" 不显示应用程序标题栏&android:theme="@android:style/Theme.NoTitleBar.Fullscreen" 不显示应用程序标题栏，并全屏&android:theme="Theme.Light" 背景为白色&android:theme="Theme.Light.NoTitleBar" 白色背景并无标题栏&android:theme="Theme.Light.NoTitleBar.Fullscreen" 白色背景，无标题栏，全屏&android:theme="Theme.Black" 背景黑色&android:theme="Theme.Black.NoTitleBar" 黑色背景并无标题栏&android:theme="Theme.Black.NoTitleBar.Fullscreen" 黑色背景，无标题栏，全屏&android:theme="Theme.Wallpaper" 用系统桌面为应用程序背景&android:theme="Theme.Wallpaper.NoTitleBar" 用系统桌面为应用程序背景，且无标题栏&android:theme="Theme.Wallpaper.NoTitleBar.Fullscreen" 用系统桌面为应用程序背景，无标题栏，全屏&android:theme="Translucent"& 透明背景android:theme="Theme.Translucent.NoTitleBar"& 透明背景并无标题android:theme="Theme.Translucent.NoTitleBar.Fullscreen"& 透明背景并无标题，全屏android:theme="Theme.Panel"&& 面板风格显示android:theme="Theme.Light.Panel" 平板风格显示
阅读(...) 评论()Android 判断横屏还是竖屏以及设置方式-android100学习网
Android 判断横屏还是竖屏以及设置方式
方法一： DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMet...
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int width = dm.widthP
int height = dm.heightP 判断宽高那个大
if (this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT)
// doSomrthing
// 横屏时dosomething
方法一：在AndroidManifest.xml中配置
如果不想让软件在横竖屏之间切换，最简单的办法就是在项目的AndroidManifest.xml中找到你所指定的activity中加上android:screenOrientation属性，他有以下几个参数：
"unspecified":默认值 由系统来判断显示方向.判定的策略是和设备相关的，所以不同的设备会有不同的显示方向.?"landscape":横屏显示（宽比高要长）?"portrait":竖屏显示(高比宽要长)?"user":用户当前首选的方向?"behind":和该Activity下面的那个Activity的方向一致(在Activity堆栈中的)?"sensor":有物理的感应器来决定。如果用户旋转设备这屏幕会横竖屏切换。?"nosensor":忽略物理感应器，这样就不会随着用户旋转设备而更改了（"unspecified"设置除外）。
方法二：在java代码中设置
设置横屏代码：setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//横屏
设置竖屏代码：setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏
因为横屏有两个方向的横法，而这个设置横屏的语句，如果不是默认的横屏方向，会把已经横屏的屏幕旋转180°。
所以可以先判断是否已经为横屏了，如果不是再旋转，不会让用户觉得转的莫名其妙啦！代码如下：
if(this.getResources().getConfiguration().orientation ==Configuration.ORIENTATION_PORTRAIT){
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);