html5/css3判断设备横竖屏

我们在刚开始开发mobile的webapp的时候经常不知道判断横竖屏，这里整理了几种方法

1: 媒介查询(media) 

//横屏
@media(orientation: portrait) {}
//竖屏
@media(orientation: landscape) {}

2: link中的media属性标签

1 <link rel="stylesheet" media="all and (orientation:portrait)" href="./">
2 <link rel="stylesheet" media="all and (orientation:landscape)" href="./">

3: 利用javascript处理

1 function adjustScreenAngle() {
2     if (window.orientation == 180 || window.orientation == 0) {
3         return "竖屏";
4     }
5     if (window.orientation == 90 || window.orientation == -90) {
6         return "横屏";
7     }
8 }

当然，需要精确处理如果不是处于临界值时的处理情况

另外需要添加事件监听函数

window.addEventListener('onorientationchange' in window ? 'orientation' : 'resize', adjustScreenAngle, false);

 

posted @ 2014-08-23 18:11  爵爷Jarvis  阅读(232)  评论(0)    收藏  举报