見出し画像

JavaScript windowの幅による条件分岐を作る方法

別に大したコードでもないけど、やったんで、備忘程度に。

方針としてh、window.innerWidthを使って、windowの幅を拾って、そこから、変数に入れた閾値で、boolean型の値が返ってくるようにします。

const windowWidth = window.innerWidth;

const breakPointA = 480;
const breakPointB = 768;

isMobileSize = (windowWidth < breakPointA);
isTabletSize = (windowWidth <= breakPointB) && (windowWidth > breakPointA);
isPcSize = (windowWidth > breakPointB);
 
if(isMobileSize){
//モバイルサイズの場合の記述
}

if(isTabletSize){
//タブレットサイズの場合の記述
}

if(isPcSize){
//PCサイズの場合の記述
}

こんな感じかな。本当はpcの時だけの処理を書きたかっただけなので、if文こんなにいらないけど。


この記事が気に入ったらサポートをしてみませんか?