爲什麼手機使用jQuery（'body'）檢測瘋狂的寬度。

一般我管理響應設計用簡單的JavaScript腳本：爲什麼手機使用jQuery（'body'）檢測瘋狂的寬度。

// Change width value on page load 
jQuery(document).ready(function(){ 
    responsive_resize(); 
}); 

// Change width value on user resize, after DOM 
jQuery(window).resize(function(){ 
    responsive_resize(); 
}); 

function responsive_resize(){ 
// var current_width = window.innerWidth; 
var current_width = jQuery('body').width(); 
alert(current_width); 

    //Responsive width 
    if((current_width < 481)){ 
    jQuery('html').addClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("responsive-layout-normal").removeClass("tablet").removeClass("responsive-layout-wide"); 
    responsive_class = "responsive-layout-mobile"; 
    }else if(current_width < 768){ 
    jQuery('html').addClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("responsive-layout-normal").removeClass("tablet").removeClass("responsive-layout-wide"); 
    responsive_class = "responsive-layout-mobile"; 
    }else if (current_width < 992){ 
    jQuery('html').addClass("responsive-layout-narrow").removeClass("responsive-layout-normal").removeClass("responsive-layout-mobile").removeClass("tablet").removeClass("responsive-layout-wide"); 
    responsive_class = "responsive-layout-narrow"; 
    }else if (current_width < 1200){ 
    jQuery('html').addClass("responsive-layout-normal").removeClass("responsive-layout-wide").removeClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("tablet"); 
    responsive_class = "responsive-layout-normal"; 
    }else if(current_width >= 1200){ 
    jQuery('html').addClass("responsive-layout-wide").removeClass("responsive-layout-normal").removeClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("tablet"); 
    responsive_class = "responsive-layout-wide"; 
    } 

}

的目標是檢測與jQuery（「主體」）裝置寬度寬（），然後應用一個CSS類的HTML標記。通常它完美的工作，我已經使用過幾次。

問題是與這個網站我更新：

http://www.futurephotography.krown.ch/fr/portfolio/all

客戶希望它反應靈敏，所以我安裝我的腳本。但在這種情況下，它不起作用。當我用手機訪問網站時（我嘗試使用iPhone 5S & Samsung S4），該腳本檢測到一個瘋狂的寬度（980像素..）。我不知道爲什麼。它在桌面瀏覽器上運行良好，如果我將其大小調整爲移動尺寸，寬度將很好計算。

我正在尋找一個解決方案，但完全卡在這一刻。

來源

2016-01-12 118218

你檢查這一點：http://stackoverflow.com/a/9477057/1782481？ – varevarao

您不使用CSS [媒體查詢]（https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries）的任何特殊原因（或者您必須使用JavaScript，['window。 matchMedia']（https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia））？ – RoToRa

除非你使用一個<meta name="viewport">元素，瀏覽器在手持設備上通常將模擬一個典型的桌面窗口的大小瀏覽器和縮放內容以適應它。這種仿真擴展到了JavaScript對顯示器的實際大小。

您可以修復使用：

<meta name="viewport" content="width=device-width">

來源

2016-01-12 13:03:28 Quentin

-1

使用

var current_width = parseInt(jQuery('body').width());

應該工作

來源

2016-01-12 12:59:05 Penguin

爲什麼手機使用jQuery（'body'）檢測瘋狂的寬度。

回答

相關問題