jqueryスクリプトを作成することは可能ですか?ブラウザが小さすぎることを検出して、訪問者にブラウザを拡大して続行するように指示できますか?
誰かがそのためのjqueryスクリプトを知っていますか?
ブラウザを最大化してもまだ小さすぎる場合はどうなりますか?
彼らは常にメッセージに対処する必要がありますか?
サンプル スクリプトを次に示します。
if( window.clientWidth < 1000 ){
alert("Send your business elsewhere");
}
ただし、ユーザーにサイズ変更を強制するというこの考えは、ユーザーがウィンドウ サイズを決定する必要があるため、あまりにも侵襲的であり、何の役にも立たないように思えます。レスポンシブ デザインとは、ビューをユーザーに合わせて成形することであり、ユーザーをビューに成形することではありません。
このようなjQueryで可能です。
if($(window).width() < 960) {
// Do something when less than 960
}
またはプレーンな JavaScript
if(document.width < 960) {
// Do something when less than 960
}
代替 CSS ソリューション
コンテキストを指定しないため、最適なソリューションが何であるかを判断するのは困難ですが、別のオプションは、CSS メディア クエリを使用して、ウィンドウが特定の幅を下回ったときにメッセージを表示することです。
これの良いところは、ウィンドウのサイズ変更イベントなどをリッスンすることを心配する必要がなく、現在の画面サイズを追跡する必要がないことです。ブラウザがそれを処理します。ウィンドウのサイズ変更イベントをリッスンする道をたどると、JSソリューションよりもはるかに効率的です。さらに、ユーザーが JavaScript を無効にしている場合も処理します。
マークアップ:
<div id="error-message">Please enlarge your window for the site to work</div>
CSS:
#error-message {
display: none;
}
@media only screen and (max-width: 960px) {
#error-message {
display: block;
}
}
誰もがこれを行うことの妥当性について良い点を挙げています。しかし -
var tooSmall = 500;
var wHeight = $(window).height();
var wWidth = $(window).width();
if ( wWidth < tooSmall ){
//Tell them so!
}