屏幕檢測和調整大小

Question

我有一個主菜單和一個針對我正在開發的應用程序的游戲，問題在於，iphone / ipod 4顯示屏的所有內容均已制作完畢並加注了邊距/大小。

我的問題是我如何才能檢測到用戶正在使用jQuery播放的設備，什么是更改頁邊距的最佳方法，如下面的小提琴所示，按鈕下方有一個向左移動的邊距，如果我要更改其寬度，比如說Iphone 6顯示屏，它將不會居中，如果需要的話，它將位於左側。

以下是一些代碼以及帶有HTML和CSS的javascript / jQuery小提琴。

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()));

第一個示例只是檢測屏幕的寬度。 如果它小於或等於350像素，則可以說您正在處理移動設備（縱向）。 對於縱向和橫向模式，請改用480px。

第二個示例檢測設備。 如果是iPhone或iPad，則“ isIDevice”為true。 但是，我不建議您使用那種瀏覽器嗅探功能，以我的經驗，它並不總是准確的。

處理不同屏幕的最佳方法是媒體查詢。 使用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;
  }
}

現在，如果屏幕寬於320像素，則背景將為黑色。 如果屏幕等於或小於320像素，則下面的CSS將變為活動狀態，並且由於它是在第一個CSS（黑色背景）之后定義的，因此它將接管並因此使背景變成灰色。

您不僅可以檢測到寬度，還可以檢測到更多。 通過媒體查詢，您可以檢測屏幕的寬度/高度，像素比率，設備方向，...

如果您使用媒體查詢，則幾乎有無限可能，使用JavaScript進行條件樣式設置僅在非常特定的情況下才有意義。 如果可以，請使用媒體查詢代替JavaScript。