Can I determine if a device is in portrait or landscape mode using jquery?

匆匆过客 提交于 2019-11-30 20:56:14

Try the orientationchange event handler, something like this:

$(window).bind("orientationchange", function(evt){
    alert(evt.orientation);
});

Here's the jQuery Mobile entry on detecting and firing the orientationchange event.

If you are just changing the layout, consider CSS Media Queries instead.

In Chrome 7 and Firefox 3.6, there is the deviceorientation event which you can listen to.


In response to your comment, a simple way of detecting tablets and phones is to detect the screen resolution and size. Tablets generally have higher display resolutions than phones. Media Queries can determine these factors.

As for tablet-phone options

  • If your device is a phone, you can toggle CSS using Media Queries based on device orientation.

  • If the device is a tablet, you can toggle the CSS using JS using the body id/class switching or by swapping out stylesheets.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!