为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个)。很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要。
window.orientation属性与onorientationchange事件
window.orientation:这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式
onorientationchange:在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似
//屏幕方向
window.onorientationchange=function(){
if(window.orientation==0){
alert("竖屏")
}else{
alert("横屏")
}
};
时间: 2024-11-04 10:54:31