移动Web开发—处理设备的横竖屏

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

  http://dict.baidu.com/s?wd=%E6%B4%9B%E4%B8%BD%E8%AF%97%E4%B8%B0%E8%83%B8+++100%25%E4%B8%B0%E8%83%B8%E6%88%90%E5%8A%9F++%E6%B3%95%E5%9B%BD%E7%94%9F%E7%89%A9%E7%A7%91%E6%8A%80%E5%AE%8C%E7%BE%8E%E7%BB%93%E5%90%88

  window.orientation属性与onorientationchange事件

  window.orientation:这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式

  onorientationchange:在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似

  //屏幕方向

  window.onorientationchange=function(){

  if(window.orientation==0){

  alert("竖屏")

  }else{

  alert("横屏")

  }

  };

posted @ 2014-11-16 11:08  小小老顽童  阅读(217)  评论(0编辑  收藏  举报