mobile设备的横竖屏切换检测

orientationchange Event

我们可以选择在window对象上监听orientationchange属性。比如:

  1. // Listen for orientation changes
  2. window.addEventListener("orientationchange", function() {
  3.     // Announce the new orientation number
  4.     alert(window.orientation);
  5.     alert(window.outerWidth);
  6.     alert(innerWidth);
  7. }, false);

window.orientation的取值：

  • 0: portrait
  • 90: landscape rotated to the left
  • -90: landscape rotated to the right
  • 180: portrait, ipad下才能取到

    resize Event

设备旋转的时候，window的resize事件也是被触发的。判断的方法是:

  • outerWidth, outerHeight: 检测是point
  • innerWidth, innerHeight: 检测的是pixel

    window.matchMedia

这是一段JS代码，可以查询对应的css媒体查询语句是否匹配。

  1. // Find matches
  2. var mql = window.matchMedia("(orientation: portrait)");
  4. // If there are matches, we're in portrait
  5. if(mql.matches) {  
  6.     // Portrait orientation
  7. } else {  
  8.     // Landscape orientation
  9. }
  11. // Add a media query change listener
  12. mql.addListener(function(m) {
  13.     if(m.matches) {
  14.         // Changed to portrait
  15.     }
  16.     else {
  17.         // Changed to landscape
  18.     }
  19. });

Media Query

使用css媒体查询:

  1. /* portrait */
  2. @media screen and (orientation:portrait) {
  3.     /* portrait-specific styles */
  4. }
  5. /* landscape */
  6. @media screen and (orientation:landscape) {
  7.     /* landscape-specific styles */
  8. }

参考资料

原文: https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/detect-orientation-change-on-mobile.html