Question

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

说明

根据上面的模型，使用提供给您的图像在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

Answer 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/

Answer 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示例，您需要一个真实的设备。

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

2 个答案: