为了应对移动设备屏幕的碎片化,我们在开发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>

Mobile Web开发 处理设备的横竖屏的更多相关文章

  1. 开发库比较(3) - Mobile Web 开发 - Sencha, jquerymobiel, phonejs, jqtouch, jqmobi

    我们一直坚信Html/css在界面上最终会一统江湖,因为在众多的界面编写中,qt,gtk,wpf,win form, wxwidgets等等,只有Html/CSS是真正拥有统一标准,只有这个有潜力作用 ...

  2. iOS开发之判断横竖屏切换

    /** *  当屏幕即将旋转的时候调用 * *  @param toInterfaceOrientation 旋转完毕后的最终方向 *  @param duration  旋转动画所花费的时间 */ ...

  3. 前端小记4——高性能mobile web开发

    1.高性能CSS3动画 与PC端场景需要相比,移动web端需要考虑的因素也相对复杂,重点考虑:流量.功耗与流畅度.在pc端上考虑更多的是流畅度,而mobile web中需要考虑网络流量的使用和耗电情况 ...

  4. (一〇八)iPad开发之横竖屏适配

    在iPad开发中,横竖屏的视图常常是不同的,例如侧边栏Dock,在横屏时用于屏幕较宽,可以展示足够多的内容,每个按钮都可以展示出标题:而竖屏时Dock应该比较窄,只显示图标不现实按钮标题. iPad比 ...

  5. 转载:移动web开发规范

    本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...

  6. 移动Web开发实践

    移动设备的高速发展给用户带来了非常大的便利.用户使用Android.iPhone和其他移动设备非常easy接入互联网. 移动设备对网页的性能要求比較高.以下就说说Mobile Web开发的一些心得. ...

  7. Activity 在横竖屏切换情况下的生命周期变化

    title: Activity 在横竖屏切换情况下的生命周期变化 date: 2018-04-26 23:05:57 tags: [Activity] categories: [Mobile,Andr ...

  8. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

  9. 基于zepto判断mobile的横竖屏状态

    借用jquery mobile中的代码,删除了一些多余的部分,简单的基于zepto的模块 var CheckOrientation = (function(){ var win = $( window ...

随机推荐

  1. 给Visual Studio更替皮肤和背景图

    给Visual Studio更换皮肤和背景图 1.先安装更换皮肤的插件  VS菜单栏里面找到:工具>扩展和更新>联机>搜索: Theme Editor   下载并安装: 安装后先不着 ...

  2. linux内存操作----kernel 3.5.X copy_from_user()和copy_to_user()

    前面的一篇文章中简单的描写叙述了一下内存映射的内容,http://blog.csdn.net/codectq/article/details/25658813,这篇文章作为用户把内存规划好之后,在用户 ...

  3. Java算法简介及排序剖析

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 从小白晋升,一路走来:从helloworld,到JFrame,再到Android:从城外小子,到内城 ...

  4. 牵一发动全身【Nhibernate基本映射】

    用牵一发动全身来形容Nhibernate的映射,一点都不夸张.小小的属性的修改,决定了整个Nhibernate的执行动态.以下让我们来详细了解一下,通过回想我们在上篇文章中用到的配置文件,做一个对xm ...

  5. python 笔记1--基础类型

    list 操作 append() 添加最外面 insert(pos,content) 插入指定地方 pop() 删除最外面 pop(pos) 删除指定地方 list中可以有list,且能用二维数组的方 ...

  6. hdu2095 像水题的不错题 异或运算

    异或运算的基础有点忘记了 先介绍一下..2个数异或 就是对于每一个二进制位进行位运算 具有2个特殊的性质 1.一个数异或本身恒等于0,如5^5恒等于0: 2.一个数异或0恒等于本身,如5^0恒等于5. ...

  7. WeixinJSBridge:微信浏览器内置JavaScript 对象

    微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...

  8. JS知识点概况

    1.什么是JavaScript a)   JavaScript 被设计用来向 HTML 页面添加交互行为. b)   JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言). c)   ...

  9. drupal 7.23 上传中文命名文件bug

    $file->filename = trim(drupal_basename($_FILES['files']['name'][$source]), '.'); //在此行下 添加以下代码即可( ...

  10. MSDTC问题集

    一.链接服务器的 OLE DB 访问接口 "SQLNCLI" 无法启动分布式事务. 尊重原著作:本文转载自http://sfwxw456.blog.163.com/blog/sta ...