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

【问题标题】：Can I determine if a device is in portrait or landscape mode using jquery?我可以使用 jquery 确定设备是处于纵向还是横向模式吗？
【发布时间】：2013-04-12 20:55:39
【问题描述】：

我想根据用于查看网站的设备是纵向/纵向还是横向/横向模式/方向，有条件地更改用户在我要创建的照片库网站上看到的内容。这可能吗？

【问题讨论】：

之前的回答可能会有所帮助：link
所有好的答案；我还不确定更喜欢哪一个。实际上，我还需要知道该设备是否是“电话”。这是我疯狂背后的方法：我将有两个“视图”——一个是垂直缩略图和全尺寸照片，另一个是横向缩略图和全尺寸照片。如果设备是手机，我希望它根据方向在这些模式之间切换。不过，对于更大的设备（例如笔记本电脑或台式机），我希望允许用户明确选择他们想要查看的方向照片。

标签： javascript jquery jquery-mobile screen-orientation landscape-portrait

【解决方案1】：

尝试orientationchange 事件处理程序，如下所示：

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

这是关于检测和触发orientationchange 事件的jQuery Mobile entry。

【讨论】：

对不起，我打错了。将其更正为 evt.orientation。

【解决方案2】：

如果您只是更改布局，请考虑使用CSS Media Queries。

在 Chrome 7 和 Firefox 3.6 中，您可以收听 deviceorientation event。

针对您的评论，检测平板电脑和手机的一种简单方法是检测屏幕分辨率和尺寸。平板电脑通常比手机具有更高的显示分辨率。媒体查询可以确定这些因素。

至于平板手机选项

如果您的设备是手机，您可以使用基于设备方向的媒体查询切换 CSS。
如果设备是平板电脑，您可以使用 JS 使用 body id/class 切换或换出样式表来切换 CSS。

【讨论】：