condiciones - operador ternario javascript

¿Cómo usar javascript de forma condicional como consultas de medios CSS3, orientación?

Question

¿Cómo usar javascript de forma condicional como consultas de medios CSS3, orientación?

Por ejemplo, puedo escribir css para detalles específicos

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

.selector1 { width:960px}

}

Ahora solo quiero ejecutar algunos javascript si coinciden las mismas condiciones

me gusta

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

A javascript code here

}

Tengo un javascript externo, por ejemplo, http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js y solo debe ejecutarse en un tamaño de pantalla y orientación específicos.

Answer 1

... Quiero ejecutar un javascript solo si el ancho máximo del navegador es 1900 px y el ancho mínimo es 768

EDITAR: En realidad, eso estuvo mal. Si está usando un dispositivo móvil, use:

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;
}

Answer 2

Aquí hay una forma aún mejor de hacer lo mismo con javascript:

https://github.com/paulirish/matchMedia.js/

Pruebe una consulta de medios de dispositivo móvil

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

Prueba de orientación horizontal

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

Answer 3

En su lugar, podría reescribir la consulta de medios como una expresión de 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); 

Answer 4

Probablemente valga la pena mencionar que existe el evento de cambio de orientación en el que es posible que desee engancharlo así:

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

Sé que sobre este evento que fue despedido por Safari móvil, tendrías que verificar otros navegadores.

Answer 5

Puedo pensar en una solución rápida: aplicar algunos estilos de forma condicional a un div invisible, y verificar si se aplican con 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();