jquery - 屏幕检测和调整大小的东西

Question

我有一个主菜单和一个我正在开发的应用程序的游戏，问题是所有的东西都是为 iphone/ipod 4 显示器制作和设置的。

我的问题是如何使用 jQuery 检测用户正在玩什么设备，以及更改边距的最佳方法是什么，正如您在下面的 fiddle 中看到的那样，按钮有移动边距它离开了，如果我要改变它的宽度让我们说 Iphone 6 显示它不会居中它会在我想要它的左边。

下面是一些代码和一个带有 HTML 和 CSS 的 javascript/jQuery fiddle。

width: 320px;
height: 480px;

就屏幕宽度而言，这就是我目前所拥有的。和这里的 margin-lefts。

margin-left: 90px;

这是链接! jSfiddle 。

Answer 1

使用 jQuery，您可以像这样检测设备的宽度:

var isMobile = false;
var width = $(window).width();
if (width <= 350) {
      isMobile = true;
}

或者，如果您想尝试检测设备:

var isIDevice = (/iphone|ipad/i.test(navigator.userAgent.toLowerCase()));

第一个示例只是检测屏幕的宽度。如果它小于或等于 350px，则可以说您处理的是移动设备(纵向模式)。对于纵向和横向模式，请改用 480px。

第二个示例检测设备。如果是 iphone 或 ipad，'isIDevice' 将为真。但是，我不建议您使用那个，它被称为浏览器嗅探，根据我的经验，它并不总是准确的。

处理不同屏幕的最佳方式是媒体查询。使用 CSS，您可以检测屏幕宽度/高度并相应地设置页面样式。

比方说，您需要检测 iPhone4 的宽度并根据该宽度调整您的元素。你这样做:

@media screen and (max-width: 320px) {
  body {
    background: #ccc;
  }
}

上面的例子是一个媒体查询。如果我把它翻译成人类语言，它会是这样的:

“如果它是一个屏幕(不是打印机或其他什么)并且如果屏幕小于或等于 320 像素那么使用这个 CSS”

在此媒体查询之上，您可以将背景定义为黑色，例如:

  body {
    background: black;
  }

@media screen and (max-width: 320px) {
  body {
    background: #ccc;
  }
}

现在，如果屏幕宽度超过 320px，背景将为黑色。如果屏幕等于或小于 320px，下面的 CSS 将变为事件状态，因为它是在第一个 CSS(黑色背景)之后定义的，它将接管从而使背景变为灰色。

您可以检测到的不仅仅是宽度。通过媒体查询，您可以检测屏幕的宽度/高度、像素比率、设备方向……

如果您使用媒体查询，则几乎有无限的可能性，只有在非常特定的情况下，使用 JavaScript 进行条件样式设置才有意义。如果可以，请使用媒体查询而不是 JavaScript。