Mobile Web开发基础之四--处理手机设备的横竖屏问题

2023-09-26 16:58:31 246

为了应对移动设备屏幕的碎片化，我们在开发MobileWeb应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。

window.orientation属性与onorientationchange事件

window.orientation:这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange:在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似

1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：





横竖屏切换检测

body[orient=landscape]{
background-color:#ff0000;
}

body[orient=portrait]{
background-color:#00ffff;
}




内容


(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
varbody=document.body;
varviewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};

2:类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：





横竖屏切换检测

.landscapebody{
background-color:#ff0000;
}

.portraitbody{
background-color:#00ffff;
}




内容


(function(){
varinit=function(){
varupdateOrientation=function(){
varorientation=window.orientation;
switch(orientation){
case90:
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);
})();

使用mediaquery方式

这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：





横竖屏切换检测

@mediaalland(orientation:landscape){
body{
background-color:#ff0000;
}
}

@mediaalland(orientation:portrait){
body{
background-color:#00ff00;
}
}




内容

低版本浏览器的平稳降级

如果目标移动浏览器不支持mediaquery，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：





按键

.landscapebody{
background-color:#ff0000;
}

.portraitbody{
background-color:#00ffff;
}


(function(){
varupdateOrientation=function(){
varorientation=(window.innerWidth>window.innerHeight)?"landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};

varinit=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();




内容

统一解决方案

将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：





横竖屏切换检测

.landscapebody{
background-color:#ff0000;
}

.portraitbody{
background-color:#00ffff;
}


(function(){
varsupportOrientation=(typeofwindow.orientation=="number"&&typeofwindow.onorientationchange=="object");

varupdateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
varorientation=window.orientation;
switch(orientation){
case90:
case-90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
varorientation=(window.innerWidth>window.innerHeight)?"landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};

varinit=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();




内容

原英文网址：http://davidbcalhoun.com/2010/dealing-with-device-orientation

Mobile Web开发基础之四--处理手机设备的横竖屏问题

热门推荐

随机推荐