屏幕检测和调整尺寸的东西

Question

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

我的问题是，如何检测用户使用jQuery播放的设备，以及更改边距的最佳方法，正如您在下面的小提琴中看到的那样，按钮有一个向左移动的空间，如果我要改变它的宽度，比如iPhone6显示器不会居中--如果我想要它的话，它就会向左移动。

下面是一些使用HTML和CSS的代码和javascript/jQuery小提琴。

width: 320px;
height: 480px;

这就是我目前拥有的屏幕宽度的范围。还有这里的边缘。

margin-left: 90px;

这是一个链接！http://jsfiddle.net/pL1t5948/。

Answer 1

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

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

或者，如果您想要检测设备：

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

第一个例子只是检测屏幕的宽度。如果它低于或等于350 it，那么就可以说您处理的是移动设备(在纵向模式下)。对于纵向和景观模式，使用480 use代替。

第二个示例检测设备。如果是iphone或ipad，“isIDevice”将是真的。然而，我不建议你使用那个，它被称为浏览器嗅探，在我的经验中，它并不总是准确的。

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

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

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

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

如果它是一个屏幕(而不是打印机或其他)和，如果屏幕较小或等于320 if ，那么使用这个CSS

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

  body {
    background: black;
  }

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

现在，如果屏幕比320 if宽，背景将是黑色的。如果屏幕等于或小于320 is，下面的CSS将变为活动，因为它是在第一个CSS (黑色背景)之后定义的，因此它将接管，从而使背景变得灰色。

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

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