javascript 我可以使用 jquery 确定设备是处于纵向还是横向模式吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15980680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 02:48:42  来源:igfitidea点击:

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

javascriptjqueryjquery-mobilescreen-orientationlandscape-portrait

提问by B. Clay Shannon

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?

我想有条件地改变用户在我要创建的照片库网站上看到的内容,具体取决于用于查看网站的设备是否处于纵向/垂直与横向/水平模式/方向。这可能吗?

回答by Abbas

Try the orientationchangeevent handler, something like this:

尝试orientationchange事件处理程序,如下所示:

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

Here's the jQuery Mobile entryon detecting and firing the orientationchangeevent.

这是有关检测和触发事件的jQuery Mobile 条目orientationchange

回答by Joseph

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

如果您只是更改布局,请考虑使用CSS 媒体查询

In Chrome 7 and Firefox 3.6, there is the deviceorientationeventwhich you can listen to.

在 Chrome 7 和 Firefox 3.6 中,有您可以收听的deviceorientation事件



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.

  • 如果您的设备是手机,您可以使用基于设备方向的媒体查询来切换 CSS。

  • 如果设备是平板电脑,您可以使用 JS 使用 body id/class 切换或换出样式表来切换 CSS。