如何获得与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改为检查该元素的可见性。