文章来自:http://blessdyb.iteye.com/blog/1537076
为了应对移动设备屏幕的碎片化，我们在开发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>
3.使用media query方式
<!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>
4.低版本浏览器的平稳降级
如果目标移动浏览器不支持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>
5.统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
<!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应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会...
在开发Mobile Web应用时，处理手机设备的横竖屏问题是必不可少的。这涉及到对不同屏幕尺寸和方向的适应，以确保用户体验的流畅性和界面的视觉一致性。本文将深入探讨两种常用的技术方法：window.orientation属性和...
"电大web开发基础形考5.pdf" 本资源主要讲述了电商网站前端页面响应式设计实验，实验目标是将首页改为响应式设计，使用Bootstrap栅格系统实现响应式网页设计。下面将对实验报告的内容进行详细分析和总结。 实验...
在Android平台上，开发一款支持二维码扫描的应用时，通常会遇到横屏和竖屏两种设备方向的问题。本主题主要探讨如何在Android应用中处理这两种屏幕方向，确保二维码扫描功能的正常运行。 首先，Android系统允许应用...
- **ASP.NET Mobile Controls**：这是微软为开发移动Web应用程序提供的一套工具包，它包含了一系列控件，这些控件专为移动设备优化，可以适应不同的设备类型和屏幕尺寸。 - **移动Web应用开发**：随着智能手机和平板...
浏览器可以通过监听窗口尺寸变化（resize事件）来判断屏幕是横屏还是竖屏，而设备方向传感器则可以提供实际的物理方向信息。强制横屏的关键在于如何合理地结合这两点，使网页始终呈现横屏布局。 1. **CSS媒体查询**...
**jQuery Mobile Web API 开发详解** 在Web应用开发中，jQuery Mobile 和 Web API 结合使用可以构建出功能强大且响应式的移动应用。本教程将深入探讨如何利用jQuery Mobile与C#实现的Web API2接口进行交互，展示...
3. **配置模拟器或连接实际设备**: 开发初期，你可以使用Windows Mobile设备模拟器进行测试，它模拟了真实设备的环境。若要连接实际设备，需要确保设备已开启开发者模式，并通过USB数据线与电脑相连。 4. **创建新...
Windows Mobile是微软为掌上设备如智能手机和平板电脑设计的操作系统，它提供了丰富的API和工具来支持应用程序开发，包括游戏。在第二部分，我们专注于游戏设计的准备知识，这将为我们后续的编程工作奠定基础。 ...
本篇文章将详细探讨如何利用ASP.NET技术进行MobileWeb应用的开发。 一、理解MobileWeb应用与ASP.NET MobileWeb应用是专门为移动设备设计的网页应用，它们通常需要适配不同屏幕尺寸、操作系统和网络环境。ASP.NET...
其次，.NET Compact Framework提供了丰富的类库，包括基础类库、数据库访问、网络通信、XML处理等，这使得开发者可以快速构建各种复杂功能的应用。例如，System.IO命名空间提供文件和流操作，System.Net命名空间则...
因此，《Head First Mobile Web》提供了关于如何确保网站或应用程序能够在不同类型的设备上正常运行的具体指导。书中提到了服务器端设备检测技术，尤其是WURFL（What U Really Feel Like）这一工具，它可以用于识别...
3. **Mobile Form控件**：Mobile Form控件是专门为移动环境设计的，如`MobileForm`，它提供了基本的表单处理功能，可以处理触屏设备的点击事件，同时支持多种设备的输入方式。 4. **Mobile Control集合**：包括`...
.NET Compact Framework是微软推出的一个专门针对嵌入式设备和移动计算平台的框架，它为开发者提供了在Windows Mobile设备上构建应用程序的能力。这个框架是.NET Framework的一个精简版本，旨在满足移动设备有限的...
### 手机网页开发——《Programming the Mobile Web》精要解析 #### 一、书籍概述 《Programming the Mobile Web》是一本由Maximiliano Firtman编写的关于移动网络开发的专业指南。本书全面深入地介绍了移动开发...
此程序可以是用VS2008开发的，语言为C#，运行环境Window Mobile 6的模拟器。效果良好。 private void menuItem7_Click(object sender, EventArgs e) {//打开 textBox1.ReadOnly = false;//textBox1设置为非只读...
网络移动
【Windows Mobile实战——RSS阅读器】是一套全面介绍如何在Windows Mobile平台上开发RSS阅读器的教程资源。这个压缩包包含了PPT演示文稿、视频教程、文档以及示例代码，旨在帮助开发者深入理解和实践在移动设备上...
移动Web的使用在呈爆炸式增长。很快，人们会更愿意在手机和平板电脑而不是PC机上浏览网页。...使用*的开发技术，包括响应式Web设计，以及利用WURFL完成服务器端设备检测；通过图片、谜题、故事和问答轻松学习。