web-dev-qa-db-ja.com

CSS3メディアクエリ、オリエンテーションのように条件付きでJavaScriptを使用する方法は？

CSS3メディアクエリ、オリエンテーションのように条件付きでJavaScriptを使用する方法は？

たとえば、特定のCSSを書くことができます

@media only screen and (width : 1024px) and (orientation : landscape) {

.selector1 { width:960px}

}

これで、同じ条件に一致する場合にのみJavaScriptを実行したい

お気に入り

@media only screen and (width : 1024px) and (orientation : landscape) {

A javascript code here

}

たとえば、http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.jsそして、特定の画面サイズと向きでのみ実行する必要があります

javascriptjquerycsscss3jquery-mobile
46
Jitendra Vyas

window.matchMedia（） を使用できます。

モバイルデバイスメディアクエリをテストする

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

横方向のテスト

if (matchMedia('all and (orientation:landscape)').matches) {
  // probably tablet in widescreen view
}

現在、すべての最新ブラウザーでサポートされています（ 詳細 ）

古いブラウザのポリフィル： https://github.com/paulirish/matchMedia.js/

56
Emil Stenström

...ブラウザの最大幅が1900pxで最小幅が768の場合にのみJavaScriptを実行したい

編集：実際、それはすべて間違っていました。モバイルデバイスを使用している場合は、次を使用します。

function doStuff(){
    landscape = window.orientation? window.orientation=='landscape' : true;

    if(landscape && window.innerWidth<1900 && window.innerWidth > 768){
        //code here
    }
}
window.onload=window.onresize=doStuff;
if(window.onorientationchange){
    window.onorientationchange=doStuff;
}
12
mowwwalker

私は簡単な解決策を考えることができます：いくつかのスタイルを非表示のdivに条件付きで適用し、それらがjavascriptで適用されているかどうかを確認します。

div#test { display: none }
@media only screen and (width : 1024px) and (orientation : landscape) {
    div#test { background-color: white; }
}

if(document.getElementById('test').style.backgroundColor == 'white')
    mediaSelectorIsActive();
11
Eric

おそらく、次のようにフックするorientationchangeイベントがあることに言及する価値があります。

$('body').bind('orientationchange', function(){
    // check orientation, update styles accordingly
});

このイベントがモバイルSafariによって起動されることについては、他のブラウザーについて確認する必要があることを知っています。

0
vzwick

代わりに、javascript式としてメディアクエリを書き換えることができます。

function sizehandler(evt) {
    ...
}

function orientationhandler(evt){  

  // For FF3.6+  
  if (!evt.gamma && !evt.beta) {  
    evt.gamma = -(evt.x * (180 / Math.PI));  
    evt.beta = -(evt.y * (180 / Math.PI));  
  }  

  // use evt.gamma, evt.beta, and evt.alpha   
  // according to dev.w3.org/geo/api/spec-source-orientation  

  ...
}  

window.addEventListener('deviceorientation', orientationhandler, false);
window.addEventListener('MozOrientation', orientationhandler, false);
window.addEventListener('load', orientationhandler, false); 
window.addEventListener('resize', sizehandler, false); 
window.addEventListener('load', sizehandler, false);
0
Emil Stenström