javascript - Can I determine if a device is in portrait or landscape mode using jquery? - Stack Overflow

admin管理员组

文章数量:1278720

I want to conditionally alter what the user sees on the photo gallery web site I'm going to create based on if the device being used to view the site is in portrait/vertical vs. landscape/horizontal mode/orientation. Is this possible?

I want to conditionally alter what the user sees on the photo gallery web site I'm going to create based on if the device being used to view the site is in portrait/vertical vs. landscape/horizontal mode/orientation. Is this possible?

• javascript
• jquery
• jquery-mobile
• screen-orientation
• landscape-portrait

Share Improve this question Follow asked Apr 12, 2013 at 20:55 B. Clay Shannon-B. Crow RavenB. Clay Shannon-B. Crow Raven 10.3k157157 gold badges501501 silver badges896896 bronze badges 2

• This previous answer might help: link – mconlin Commented Apr 12, 2013 at 21:00
• All good answers; I'm not sure which one to prefer yet. Actually, I also need to know whether the device is a "phone" or not. Here's the method behind my madness: I will have two "views" - one with vertical thumbnails and full-size photos, the other with landscape thumbnails and full-size photos. If the device is a phone, I want it to toggle between those modes based on orientation. For a larger device, though (such as a laptop or desktop), I want to allow the user to explicitly choose which orientation photos they want to see. – B. Clay Shannon-B. Crow Raven Commented Apr 12, 2013 at 21:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 ment, 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.

本文标签： javascriptCan I determine if a device is in portrait or landscape mode using jqueryStack Overflow