如何獲得與CSS媒體查詢相同的寬度

Question

看起來isTablet函數在稍後的點返回true。爲什麼，以及如何解決這個問題，以便isTablet表示當CSS媒體查詢確實是平板電腦時。

function isTablet() { 
    return $(window).width() >= 768; 
} 

和

<link href="css/tablet-default.css" media="all and (min-width: 768px)" rel="stylesheet" type="text/css" /> 

Answer 1

的.WIDTH（）函數不包括補白或利潤率。

http://api.jquery.com/width/

這可能是你注意到的差異。

Answer 2

而不是硬編碼isTablet函數中的寬度（跟在DRY之後），您可以檢查由於媒體查詢而發生更改的元素的狀態。

例如，如果您有一個通常爲display: none的元素，但對於平板電腦具有display: block，請讓isTablet改爲檢查該元素的可見性。