携帯電話回転の変数をJSと変更する

Question

私はグーグルでこれを行う方法について調査しましたが、それを有効にすることはできませんでした。私はwidthという変数を宣言しました。画面の幅が660pxより小さい場合は幅を140px、そうでなければ100pxにする必要があります。変数「width」は、デバイス「phone」を回転させているときに変更する必要がありますが、機能しません。私は変数が、デバイスを回転させるたびに画面の幅をチェックする必要があります。

JS

var width = 0; 
    function check() 
    { 

if (window.innerWidth < 660) 
    { 
    width = 140; 
    } 
    else{ 
    width = 100; 
    } 
} 


window.addEventListener("orientationEvent", check); 
document.write(width); 

Answer 1

何の...実際の画面表示サイズ、D.O.M.内の特定の要素を変更しようとしていますか？

あなたのコードを一見して、あなたがサイズを変更しようとしている特定のことを知らずに、私はあなたが使用すべきJavascriptではないと言います。 CSSでメディアクエリを使用する必要があります。

あなたのサイトにあるレベルの反応性を作り出そうとしているなら、（理論的には）いくつかのJavaScriptを使うことができると思いますが、それは本当の "ハッキリ"で効率的なコーディングではありません。それはあなたのサイトを遅くするのに役立つかもしれません。

以下に一般的な例を示しますが、重要な点は2つあります。彼らは以下のとおりです。

1）あなたのHTMLファイルの「頭部」セクションで、次のコードに置く必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1"/> 

2）以下のコードは、「オリエンテーション」を言及し、あなたが入れなければならないのいずれか " 「風景」または「肖像」のいずれかになります。

は、それはこのようになります：

@media screen and(max-width: 660px) 
       and(orientation: landscape) { 
        /* In this commented out area between the 2 curly brackets, you should put the css code of the elements you want to have resize */ 
} 

私はそれが役に立てば幸い。

のjQuery：

$(window).resize(yourFunction); 

平野：

Answer 2

あなたはイベントサイズを変更ウィンドウを使用することができます

window.onresize = function(){yourFunction};; 

または

window.addEventListener("resize", yourFunction);