Geek Answers Handbook

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

I want to conditionally change what the user sees on the website of the photo gallery that I am going to create, based on whether the device is used to view the site in portrait / vertical or landscape / horizontal mode / orientation. Is it possible?

+4
source share
2 answers

Try the orientationchange event handler, something like this:

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

Here 's a jQuery Mobile entry for detecting and triggering an orientationchange event.

+5
source

If you just change the layout, instead of CSS Media Queries .

In Chrome 7 and Firefox 3.6 there is a deviceorientation event that you can listen to.

In response to your comment, an easy way to detect tablets and phones is to determine the resolution and screen size. Tablets usually have a higher resolution display than phones. Media programs can determine these factors.

Regarding tablet options

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

  • If the device is a tablet, you can switch CSS using JS by switching body / class or by replacing style sheets.

+1
source

More articles:


All Articles