方法一：
本地的window.matchMedia方法允许实时媒体查询。
代码如下:
var mql = window.matchMedia("(orientation: portrait)");
// 如果有匹配，则我们处于垂直视角
if(mql.matches) {// 直立方向
alert("1")
} else {//水平方向
alert("2")
}
// 添加一个媒体查询改变监听者
mql.addListener(function(m) {
if(m.matches) {
// 改变到直立方向
console.log("改变到直立方向");
}
else {// 改变到水平方向
console.log("改变到水平方向");
}
});
方法二：监听调整大小的改变
代码如下:
window.addEventListener("resize", function() {
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)
}, false);
方法三：jquerymobile框架下使用
window.addEventListener("orientationchange", function() {
// 宣布新方向的数值
alert(window.orientation);
}, false);
方法四：
/* portrait */
@media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
}