2016-08-01 11 views
0

私は非常に全体として新しいと私は非常にここでifステートメントに固執しています。このコードの目的は、画面の幅(またはメディアクエリ)が450px未満であるかどうかを読み込み、アラートボックスを表示することです。現時点では1ページで作業する必要があります。Javascriptの画面幅/メディアクエリがTrueの場合に警告ボックスを返すステートメント

HTML:

either 

<body onload="fullQuote()"> 

-or- (I'm not sure if the second actually works) 

<script>window.onload = fullQuote()</script> 

はJavaScript:

function fullQuote() { 
var mediaQuery = window.matchMedia("(max-width: 450px)"); 
if (mediaQuery.matches) { 
    alert("Test"); 
    } 
} 

私はどこにでもこのコードでいただきました!間違っについての答えを見つけるように見えることはできませんが、私は見つけるの異なる方法を試してみました

if (screen.width <= 450) { 
if (document.documentElement.clientWidth < 450) { 

のような画面サイズを外し、括弧内のブール値:

if (mediaQuery.matches == true) { 

この周りのいくつかの方法の中で、これは現在、同じ失敗した結果を共有するメモリに失われています。

私が間違ってこの問題をつもりだ場所に任意の助けをいただければ幸いです

おかげで、

ウィル

答えて

0

window.onload

あなたが呼び出しているので、これは動作しません機能を設定するときは、window.onloadです。あなたはこのように書く必要があります。

<script>window.onload = fullQuote</script> 

あなたは機能ではなく、呼び出された関数の戻り値に等しくなるようにwindow.onloadを設定しているこの方法。

画面の幅を取得するための理想的な方法は、window.innerWidth

if(window.innerWidth < 451) //... 

エクストラを使用することです、画面幅に

を取得する:あなたが変更を検出したい場合、あなたはリスナーを追加することができます

のサイズを変更検出ウィンドウのサイズをそのまま変更します。でも、リスナーを使用しながら、アラートが同期操作であるとして

document.addEventListener('resize', fullQuote); 

しかし、私はいくつかの問題やjankを引き起こす可能性がある、アラートを使用することはお勧めしません。

+1

これはうまくいきました:)ありがとうございました! –

関連する問題