首頁 > web前端 > css教學 > 為什麼 $(window).width() 和 CSS 媒體查詢報告不同的視窗寬度?

為什麼 $(window).width() 和 CSS 媒體查詢報告不同的視窗寬度?

Susan Sarandon
發布: 2024-12-10 09:56:10
原創
685 人瀏覽過

Why Do $(window).width() and CSS Media Queries Report Different Viewport Widths?

$(window).width() 和CSS 媒體查詢之間測量的視口寬度不一致

使用jQuery 的$(window ).width 時() 來決定視口的寬度,您可能會遇到與CSS 媒體查詢計算的寬度有差異的情況。這種差異可以歸因於多種因素,包括瀏覽器滾動條的寬度。

要解決此問題,請考慮使用 window.matchMedia()。此方法提供與 CSS 媒體查詢一致的準確寬度計算。所有現代瀏覽器都支援它,並且可以如下實現:

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}
登入後複製

使用Modernizr 的替代解決方案:

如果瀏覽器相容性是一個問題,您可以使用Modernizr提供的mq方法。它支援所有理解媒體查詢的瀏覽器。

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}
登入後複製

請注意,使用$(window).innerWidth() 計算視口寬度,同時考慮滾動條,可能並不總是最佳解決方案,因為滾動條寬度可能因瀏覽器而異。

以上是為什麼 $(window).width() 和 CSS 媒體查詢報告不同的視窗寬度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板