Dog's Life 2.0

這幾天遇到一個靈異現象, Chrome, Firefox 都沒問題, 但在 IE 11 裡, @media 媒體查詢的區段中設定的CSS樣式, 在網頁重新整理 / Refresh (ASP.NET 的 Post back) 後就會失效

試了大半天, 找到一個解法:

...就改用 Javascript 來執行媒體查詢吧.

從網路上抄了一段 code 來偵測瀏覽器是否為IE. 如果是IE的話, 就再加一段 Javascript 執行媒體查詢, 問題就這樣解決了. 效能還可以.

 Javascript 執行媒體查詢的方式:

var oMedia = window.matchMedia("(min-width: 768px)");
ResetStyle(oMedia);
oMedia.addListener(ResetStyle);

function ResetStyle(oM) {
    if (oM.matches) { // If media query matches
        $(".my_class").css("display", "flex");
    } else {
        $(".my_class").css("display", "block");
    }
}

出處:

https://www.w3schools.com/howto/howto_js_media_queries.asp

把我今天4個小時的青春所換來的踩雷經驗, 在這裡分享給有緣人...