更改设备方向上的图像 jquery-mobile答案

【问题标题】：Change image on device orientation jquery-mobile更改设备方向上的图像 jquery-mobile
【发布时间】：2017-05-27 09:57:39
【问题描述】：

所以我的任务是做一个移动设计网站，每次倾斜设备时我都必须更改图像。

说明

根据上面的模型，使用提供给您的图像在 HTML 文档中创建 4 个图层。这是一个移动网页。我们提供了纵向和横向的图像资源。正确的图像应该根据用户的设备方向显示。此页面的目的是允许用户通过倾斜设备在层之间导航。示例：在蓝色页面上，将您的设备向左倾斜会将您带到绿色页面并将其倾斜到右将您带到黄色页面。在图层之间转换时也应该有淡入淡出的效果。

所以，我正在考虑这样的事情，但我的代码并没有真正工作。请检查下面的 jsfiddle 示例，谢谢。

HTML 代码

<div data-role="page">
  <div data-role="header">
    <h1>The orientationchange Event</h1>
  </div>

  <div data-role="main" class="ui-content">
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

Link

【问题讨论】：

标签： jquery html css jquery-mobile mobile

【解决方案1】：

如果您使用 jquery 调整图像大小，请尝试使用更快速和稳定的 css 媒体查询来调整图像大小，在 CSS 中使用类似这样的东西：

 @media screen and (orientation:portrait) { /*CSS for portrait*/ }

和

 @media screen and (orientation:landscape) { /*CSS for landscape*/ }

不要忘记在放置 css 文件的链接标签上使用 media="screen" 属性，否则它将不起作用。

或者，您可以以百分比或像素（在固定宽度的情况下）为图像提供最大宽度，并将高度设置为自动，例如 max-width:80%;高度：自动；以避免在屏幕调整大小或方向更改时拉伸图像。

【讨论】：

感谢您的回答，我正考虑做同样的事情，但如果我错了，请纠正我，我想我只能为每个方向选项（纵向、横向）和我的如果我需要在每个方向（左、右和直）上更改它们，这就是为什么我有点困惑并想使用 jquery 移动定位功能。

【解决方案2】：

嗯，这并不容易。设备之间存在很多不一致之处。您可能需要为此切换到更好的方法。无需重新发明轮子，已经有一些很棒的倾斜和运动检测库。

例如：Full-Tilt 中定义了以下方向：

SCREEN_ROTATION_0        = 0
SCREEN_ROTATION_90       = M_PI_2
SCREEN_ROTATION_180      = M_PI
SCREEN_ROTATION_270      = M_2_PI / 3
SCREEN_ROTATION_MINUS_90 = - M_PI_2

您可以获取角度，然后相应地更改页面。要测试compass 示例，您需要一个真实的设备。

【讨论】：