幅が一定になったときに再読み込みさせる

サイトを作っているのですが、ウィンドウの幅が指定した幅になると再読み込みをさせたいです。

現状・したこと

CSSでできればよかったのですが、CSSで再読み込みさせるコードがない（自分調査による）ことやCSSでファイルを読み込ませる方法が今のところ見つかっておらず、できていない。
そこでJavascripのファイルを使ってやろうとしたが、幅を検知するコードや再読み込みのコードは知っているが、幅が一定になった時に実行するというコードが分からない。

そこで「ウィンドウの幅が指定した幅になると再読み込みさせる」ということができる方がいれば教えていただけると幸いです。

追記

今回、レスポンシブデザインをして幅が小さくなると画面が切り替わるという設定をしたのですが、パソコンで画面を小さくしてもう一度戻したとき、デザインが崩れたままで再読み込みしないと戻らないという状況になりました。（今回のターゲットはスマホの人はおらず、パソコンで画面を小さくしている人）
そのため、デザインを戻すために再読み込みをしたいと考えました。
もしもデザインを再読み込みせずに戻せる方法があれば教えていただきたいです。
しかし、自分では戻す方法が分からなかったので再読み込みさせる方法を考えていました。

サイトは軽く、再読み込みしても時間がかからない点やサイトを使う人がパソコンで使用すること、などを考慮して再読み込みをさせたいと考えています。

そのため、デザインの崩れた一部の要素のみ再読み込みさせることが可能であればその方法でも構いません。

jinba

2022/01/18 11:45

レスポンシブデザインにしたいのでしょうか？幅が一定の値になったら要素を再読み込み？それともページ全体を再読み込み？情報が少なすぎて答えづらいです用途や目的を提示してください

soutaiha

2022/01/18 21:46

ありがとうございます重要な情報が抜けていたと考えたので質問内容を更新しました

行動規範の内容に同意します

回答1件

はじめに、より詳細な回答を求めるのならばソースも提示ください
回答者は

「このコードを書いてるなら、この方法なら理解できるだろう」
「このコードの書き方は、そもそも勘違いをしているのでは」

などを考えます

幅が小さくなると画面が切り替わるという設定をした

とのことですので

js
1if(サイズが〇pxよりも小さくなった場合){
2/* 小さく切り替える */
3}
4
5if(サイズが〇pxよりも大きくなった場合){
6/* 戻す */
7}
8

ということが出来ていると仮定した場合以下の様にすればいいのではないかと思います

js
1if(サイズが〇pxよりも大きくなった場合){
2location.href = "index.html"; /* 自身のURLへページ遷移 */
3}
4

ただ、こうしてしまうと〇pxよりも大きくなった場合ずっと遷移してしまいます
なので条件を変更しましょう

js
1if(一度サイズが小さくなったことがある場合　かつ　サイズが〇pxよりも大きくなった場合){
2location.href = "index.html"; /* 自身のURLへページ遷移 */
3}
4

CSSで再読み込みさせるコードがない（自分調査による）

一般的にレスポンシブデザインで普及しているのはCSSを使った方法です
詳しくは「メディアクエリ」で検索してください

CSS
1body {
2width: 1100px;
3}
4
5@media only screen and (max-width: 800px) {
6/* サイズが800px以下になった場合bodyのCSSを以下に上書きする */
7 body {
8  width: 700px;
9 }
10}

非常に簡単なサンプルですが上記ではサイズが800px以下になった場合にbodyの横幅は700pxになり
サイズ800px以上になった場合bodyの横幅を1100pxに戻す、といったことをしています。

今回のターゲットはスマホの人はおらず

とのことですので、そもそもレスポンシブデザインにする必要があるのだろうか？とも思ってしまいます
これもソース提示が無いのでレスポンシブデザインにする意図が想像できません

幅の指定などをpx等の単位とせず、%で指定してやれば済む話なのではとも思ってしまいます

投稿2022/01/18 23:57

jinba

総合スコア310

soutaiha

2022/01/19 11:08

回答ありがとうございます。解決策、最後の提案をありがとうございます。しかしこれには自分のできることを増やしたいという考えで初心者はするべきではなかったかもしれませんが、してみようと思った次第です。そこで、「幅が小さくなると画面が切り替わるという設定をした」というのはjsファイルで設定したのではなく、CSSファイルで設定したため、jsファイルで「if(一度サイズが小さくなったことがある場合　かつ　サイズが〇pxよりも大きくなった場合)」という設定の仕方がわかりません。もしお分かりであれば教えていただけないでしょうか？