メディアクエリの解釈がMac Safariだけ違う - Qiitawindow.onresize = function(){ if(window.innerWidth > 600){ ~~~~~~~ PC ~~~~~~~ }else{ ~~~~~~~ SP ~~~~~~~ } } そんな時、cssのブレイクポイントと、JSのブレイクポイントがズレたらお話しにならない。 メディアクエリは、スクロールバーを含めた幅で判定する なのでウィンドウ幅の判定には、スクロール幅も含めた値を返す window.innerWidth を使う。$(window).width() はバーを含めない値を返すため、その分CSS側とズレてしまう。 上記を考慮して、 601px以上は白 600px以下はピンク になるページが以下です。 DEMO <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
