Mobile Web开发基础之四--处理手机设备的横竖屏问题
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。
- window.orientation属性与onorientationchange事件
window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
内容
</div>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>
2: 类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
内容
</div>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>
- 使用media query方式
这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<div>
内容
</div>
</body>
</html>
- 低版本浏览器的平稳降级
如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按键</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
内容
</div>
</body>
</html>
- 统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};
var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
内容
</div>
</body>
</html>
原英文网址：http://davidbcalhoun.com/2010/dealing-with-device-orientation
以上所述是小编给大家介绍的Mobile Web开发基础之四--处理手机设备的横竖屏问题，希望对大家有所帮助！
相关推荐
-
Android实现横竖屏切换的实例代码
这几年一直在做手机上和电视盒的App,几乎没有考虑过横竖屏切换的问题.电视盒好说,横屏不变,你要是给它设计个竖屏人家也没机会使:而手机上的应用就不好说了,有些界面你设计了横竖屏兼容可能是为了表示你的功能强大.但是按照惯例,或许也是设计师图省事,我们只是做一个方案.就像目前主流的App都只有竖屏一个模式,比如微信.京东和招商银行.我截了几张图表示一下. 但是像地图之类的应用,也许横屏会显示的更友好一些.请看腾讯地图的设计如下: 细心的你会发现,地图的横竖屏的样式几乎是一样的布局,调整起来还是比较容
-
JS检测移动端横竖屏的代码
使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可是这段代码我不能用.因为我
-
更靠谱的H5横竖屏检测方法（js代码）
前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen.orientation.angle等于0|180.90|-90度来判断横竖屏 }, false); 代码添加上
-
jQuery mobile 移动web(4)
移动互联网的发展,促生了各种各样的移动Web框架.jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可. 下拉菜单: 设置label 元素的for 属性为 select lab
-
解决Android手机屏幕横竖屏切换
Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载), 怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在AndroidManifest.xml中为Activity设置configChanges属性, application android:icon="@drawable/icon" android:label="@string/app_name"> <activ
-
使用jQuery Mobile框架开发移动端Web App的入门教程
一.jQuery Mobile 的渐进增强设计与浏览器支持 根据维基百科( Wikipedia ) 的解释,渐进增强的设计主要包括以下几点 basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容) basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能) sparse, semantic markup
-
jQuery mobile 移动web(6)
jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水平移动30px屏幕像素上时触发. swipeleft 向左侧滑动 swiperight 像右侧滑动. 2.方向改变事件 orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数, 该参数有两种返回值:p
-
javascript检测移动设备横竖屏
如何判断 移动设备提供了两个对象,一个属性,一个事件: (1)window.orientation 属于window对象上一个属性:共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式. (2)orientationchange 是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件. 这两个搭配起来使用,很容易就能获得设备的
-
Mobile Web开发基础之四--处理手机设备的横竖屏问题
为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显--我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个).很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要. window.orientation属性与onorientationchange事件 win
-
JS解决移动web开发手机输入框弹出的问题
在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化 1.页面提高背景会出现不够用的现象, 解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在, 2.底部用fix布局 这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法 一.是页面页相应的提高,页面变化多少我们让上面的页面滚动多少, $('input').bind('click',function(e){ var $th
-
SpringBoot2零基础到精通之配置文件与web开发
目录 1 配置文件 1.1 yaml文件 1.1.1 基本语法 1.1.2 数据格式 1.2 数据绑定时关键字提示 2 web开发 2.1 静态资源的存放与访问 2.2 webjars 2.3 web小技巧 2.3.1 index页面 2.3.2 网页小图标 2.4 web场景源码浅析 1 配置文件 之前说过,配置文件大致分两种类型:properties.yaml.其中properties是最常规的配置文件类型:使用键值对等号的格式来对各种参数进行配置,后缀为.properties,在这里就
-
Flask框架web开发之零基础入门
Flask框架是Python开发的一个基于Werkzeug和Jinja 2的web开发微框架,它的优势就是极其简洁, 但又非常灵活,而且容易学习和应用.因此Flask框架是Python新手快速开始web开发最好的选择,此外, 使用Flask框架的另一个好处在于你可以非常轻松地将基于Python的机器学习算法或数据分析算法集成到 web应用中. 1.可以用Flask框架做什么 从博客应用到克隆一个facebook或者twitter,理论上你可以用Flask做任何事情.有很多库 可以直接使用,例如f
-
web开发人员学习jQuery的6大理由及jQuery的优势介绍
jQuery是一个用来简化HTML客户端开发的JS(JavaScrip)库,它支持HTML DOM处理,同时还融合了部分HTML和CSS.许多网站建设公司已经加入了jQuery的阵营,你的公司也该加入了. 下面就来看看jQuery为何对公司有如此大的影响吧. 1.jQuery简化了工作 学习jQuery非常容易--毕竟这个函数库由更简短.更简洁的代码创建.jQuery具有语句简洁.编码标准开放的特点,这些特点帮助开发者缩短了配置网站和应用所需的时间. 另外,使用jQuery创建web页面时,不要
-
.Net Core 3.1 Web API基础知识详解(收藏)
目录 一.前言 二.Swagger调试Web API 三.配置文件 四.文件上传 五.统一WebApi数据返回格式 六.模型验证 七.日志使用 八.依赖注入 九.缓存 十.异常处理 十一.应用安全与JWT认证 十二.跨域 一.前言 随着近几年前后端分离.微服务等模式的兴起,.Net Core也似有如火如荼之势 ,自16年发布第一个版本到19年底的3.1 LTS版本,以及将发布的.NET 5,.NET Core一路更迭,在部署和开发工具上也都支持了跨平台应用.一直对.Net Core有所关注,但未
-
ajax与传统web开发的异同点
AJAX: 什么是AJAX AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换 AJAX 可以使网页实现异步更新,意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. AJAX的特点 基于Web标准,使用文档对象模
-
三种Web开发主流技术的性价评价
ASP:MS IIS 4/Visuale Interdev 6 PHP:Apache 1.2.x/HomeSite 4.5/PHP 4 Java:iPlanet Web Server 4.1/JBuilder 3.5/JDK 1.2.2 以上技术本人却实使用过,而且已经使用它们做过项目,基于以前的工作经验给初学者和正在对自己应用系统进行选择的同仁谈谈自己对它们的评价,以做参考,同时也请大家提出自己的想法和意见 ,多交流.但是我有一个这样的看法:"一个产品它存在就有存在的理由,它不可能
-
C#开发Android百度地图手机应用程序(多地图展示)
一.简介 地图控件自v2.3.5版本起,支持多实例,即开发者可以在一个页面中建立多个地图对象,并且针对这些对象分别操作且不会产生相互干扰. 文件名:Demo04MultiMapView.cs 简介:介绍多MapView的使用 详述:在一个界面内,同时建立四个TextureMapView控件: 二.示例 1.运行截图 在x86模拟器中的运行效果如下: 在上一节例子的基础上,只需要再增加下面的步骤即可. 2.添加demo05_multimap.axml文件 在layout文件夹下添加该文件,将其改为