画面サイズに応じて異なるホームページを読み込む方法

-2

画面サイズに応じて別のホームページを読み込みたいと思います。誰でもそれについて助けることができますか？画面サイズについては、例えば画面サイズに応じて異なるホームページを読み込む方法

、 <私はデフォルトのランディングページを表示する画面サイズ> 960 PXについてと index1.htmlとしてデフォルトのランディングページを表示する960ピクセルとして

index2.html

ありがとうございます。

2017-01-27 NikunjVala

が、私はスクリプトでこれを行うだろう：

あなたが求めているものを行う方法は、ウィンドウの幅をチェックし、必要に応じてリダイレクトするページ上のJavaScriptのビットを持つことですメディアクエリに基づいています。多くのクエリの作成やクエリに基づいたアセットの変更を計画している場合は、[Modernizr]（https://modernizr.com/docs）を軽量ソリューションとしてお勧めします。それは、あなたが解決しようとしている問題がわからないが、私は解決方法がレスポンシブルウェブの原則に反すると信じている。ユーザーが1つのメディアクエリから別のメディアクエリに移動して戻った場合はどうなりますか？どのようにページのリダイレクトを処理していますか？視聴者が変化するメディアとして再利用できるブロックの使用を検討してください。お役に立てれば！ –

この質問はresponsive-designとタグ付けされていますが、「適応型デザイン」の実行方法については質問しています。レスポンシブなデザインは、例えばメディアクエリーを使用して、それが閲覧されているメディアに適合する単一のHTMLページを持つことになります。私はどちらが優れているかについて議論するつもりはありませんが、レスポンシブルデザインに興味があるので、Googleにいくつかのアイデアを持ってもらうためにこれを追加します。示唆したように

// In index2.html 
if (window.innerWidth < 960) { 
    window.location = "index1.html"; 
} 

// In index1.html 
if (window.innerWidth >= 960) { 
    window.location = "index2.html"; 
}

出典

2017-01-27 17:01:26 AmericanUmlaut

ありがとうございます。それは動作するようです。ブラウザのサイズを変更するときに問題が発生するだけで、ページをリロードする必要があります（Ctrl + F5）。私はwindow.resize（）関数を試しました。しかしそれはうまくいかなかった。 – NikunjVala

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize-あなたが定義できるwindow.onresizeイベントがあります。 – AmericanUmlaut

しかし、画面サイズを調整するたびにサイトがリロードされると、ユーザーにとっては迷惑となることがあります。 – AmericanUmlaut

画面サイズに応じて異なるホームページを読み込む方法

答えて

関連する問題