JavaScript與媒體查詢

Question

我正在為我的網站創建一個響應框架-這對我來說是第一個。 沒有花哨的東西只是通過移動->平板電腦->桌面做出響應。

我對媒體查詢的工作方式感到滿意，但是通過javascript添加類似乎是另一個可行的選擇。

做這樣的事情很容易：

function queryViewport() {

    var $window = $(window);
    var $body = $("body");

    var windowWidth = $window.width();
    var windowHeight = $window.height();

    // Query window sizes to determine whether device is to be
    // classified as a small mobile device or a larger tablet/
    // desktop device.
    var isMobile = windowWidth < 600 || windowHeight < 600;

    $body.toggleClass("mobile", isMobile).toggleClass("desktop", !isMobile);

    // Calculate whether viewport is portrait or landscape
    var isPortrait = windowHeight > windowWidth;

    $body.toggleClass("portrait", isPortrait).toggleClass("landscape", !isPortrait);
}

但是，我不是該領域的專家-我錯過了什么嗎？真的那么簡單嗎？

所有建議表示贊賞。

Answer 1

您可以使用這個縮小的jQuery代碼段來檢測您的用戶是否正在使用移動設備進行查看。 如果您需要測試特定的設備，我在下面提供了一系列JavaScript代碼段，這些代碼段可用於檢測各種移動手持設備，例如iPad，iPhone，iPod，iDevice，Andriod，Blackberry，WebO和Windows Phone。

if(jQuery.browser.mobile)
{
   console.log("You are using a mobile device!");
}
else
{
   console.log("You are not using a mobile device!");
}

查看更多使用JQUERY檢測移動設備

請參閱下面的鏈接以了解區別

哪個更好：CSS媒體查詢或JQuery mobile？

Answer 2

我建議媒體查詢，因為所有將來的修改都可以在CSS中完成，而不必為新的斷點在單獨的JS文件中添加越來越多的邏輯。

此外，CSS解決方案一直支持到IE9 +，並且具有JS polyfills（ Respond ）以實現向后兼容性。 基本上，它只是內置在CSS中並且運行良好。 似乎沒有必要用javascript重寫相同的邏輯，每個新的大小都有一個新的類。

最重要的是，媒體查詢使您可以將CSS定位為不同的媒體類型，例如打印，或者，如果您要使用基於高度的媒體查詢或目標視網膜顯示，則無需添加新類就可以做到這一點。 通常，慣例是將媒體查詢與JS備用廣告一起使用，我認為沒有其他建議。

Answer 3

JS根據獲取視口高度和寬度的方式產生不同的結果：

在這種情況下，您可以使用window.outerWidth ， window.innerWidth ， document.documentElement.clientWidth獲得屏幕寬度。 所有這些都會產生不同的結果，但是第二個將為您提供與CSS @media斷點相同的值。

$(window).width()也與@media斷點不同。

我取決於瀏覽器的差異，例如是否考慮垂直滾動條。 最好使用CSS 。