码迷,mamicode.com
首页 > 移动开发 > 详细

js和css实现检测移动设备方向的变化并判断横竖屏

时间:2015-08-25 13:54:27      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

方法一:

本地的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 */

  }

  

js和css实现检测移动设备方向的变化并判断横竖屏

标签:

原文地址:http://www.cnblogs.com/sandy-happyhour/p/4757014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!