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

Posted 2023-05-09

【中文标题】更改设备方向上的图像 jquery-mobile

【英文标题】：Change image on device orientation 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

【参考方案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%;高度：自动；以避免在屏幕调整大小或方向更改时拉伸图像。

更多详情请参考以下链接

https://api.jquerymobile.com/orientationchange/

【讨论】：

感谢您的回答，我正考虑做同样的事情，但如果我错了，请纠正我，我想我只能为每个方向选项（纵向、横向）和我的如果我需要在每个方向（左、右和直）上更改它们，这就是为什么我有点困惑并想使用 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 示例，您需要一个真实的设备。