レスポンシブデザインのサイトを作っていて、
ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。

でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。
window.resize()
とかで。


んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、
どうやらwin端末だと切り替えのタイミングがズレることがわかった。

css　→　768pxで切り替えたい
　　→　@media screen and (max-width: 768px)
　　→　ちゃんと768pxで切りかわる


js　→　768pxで切り替えたい
　　→　if($(window).innerWidth() < 768){
　　→ 　785くらいで切り替わっちゃう

1pxズレるとかの現象じゃなく、20px近くずれちゃう。

んでよくよく観察してみると、
cssのほうはスクロールバーもふくめて768pxになったら切り替わるのに
jsのほうはスクロールバーをのぞいて768pxになったら切り替わるので、
スクロールバーの17px分くらいをを含めると785pxくらいで切り替わっちゃうんだな。

※macのchromeだとスクロールバーが 画面に薄く重なって幅をとらないのでこの問題はおきない。

いろいろ調べたけど、その問題に困ってる記事等がなくて、
あがいていたら、解決した。

それは、

jsのほうの横幅取得をスクロールバーを含めたものにすればよいということだった。

こう変更
if($(window).innerWidth() < 768){

　　　↓

if(window.innerWidth < 768){
 
違いがわかりにくいけど、
上は、jqueryのinnerWidth()で、したはjavascriptのinnerWidthなの。

下にすることによって、cssのmedia queryのブレイクポイントと一致した。


めでたしめでたし。 
");