Question

我有一个主菜单和我正在开发的应用程序的游戏，问题是所有内容都是为iphone / ipod 4显示屏制作并设置了边距/大小。

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

下面是一些代码和javascript / jQuery小提琴，包含HTML和CSS。

width: 320px;
height: 480px;

这就是我目前拥有的屏幕宽度。和边际左派。

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，那就是IDI服务＆＃39;将是真的。但是，我不建议您使用那个，它被称为浏览器嗅探，根据我的经验，它并不总是准确的。

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

让我们说，您需要检测IPhone4的宽度并根据该宽度调整元素。你这样做：

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

以上示例是媒体查询。如果我把它翻译成人类语言，那就是这样的：

＆＃34;如果是屏幕（不是打印机或其他） AND ，如果屏幕小于或等于320px 那么使用此CSS＆＃34; < / p>

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

  body {
    background: black;
  }

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

现在，如果屏幕宽度超过320像素，背景将为黑色。如果屏幕等于或小于320px，则下面的CSS将变为活动状态，并且因为它是在第一个CSS（黑色背景）之后定义的，所以它将接管，从而使背景变灰。

您可以检测到更多，而不仅仅是宽度。使用媒体查询，您可以检测屏幕的宽度/高度，像素比率，设备方向......

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