path: root/files/es/detectar_la_orientación_del_dispositivo/index.html

---
title: Detectar la orientación del dispositivo
slug: Detectar_la_orientación_del_dispositivo
tags:
  - Aceleración
  - CSS
  - Consultas
  - Orientación
  - para_revisar
---
<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ gecko_minversion_header ("1.9.1") }}</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación,</strong> es decir, que pueden informar sobre los datos que indican cambios en su orientación con relación a la atracción de la gravedad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En concreto, los dispositivos manuales como, por ejemplo, los teléfonos móviles pueden utilizar esta información para rotar automáticamente la pantalla de forma que se mantenga en posición vertical. Cuando el dispositivo se gira, presenta una vista en pantalla panorámica del contenido de la web, de manera que su anchura es superior a su altura.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Hay dos maneras de tratar la información de orientación en Gecko.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La primera es la <a href="/En/CSS/Media_queries#orientation" title="En/CSS/Media queries#orientation">consulta a medios de orientación</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto te permite ajustar el contenido de tu diseño con CSS, en función de si el dispositivo está en modo horizontal (es decir, su anchura es superior a su altura) o en modo vertical (su altura es mayor que su anchura).</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La segunda manera de administrar la información de orientación, , es el <a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation">evento </a></span></span><a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation"><code>MozOrientation</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a>, agregado en Gecko 1.9.2 (Firefox 3.6).</a></span></span><a> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este evento se envía cuando el acelerómetro detecta un cambio en la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al recibir y procesar los datos reportados por los eventos <code>MozOrientation</code>, es posible responder de forma interactiva a los cambios de elevación y rotación causados por el movimiento del dispositivo.</span></span></a></p><a>
<h2 id="Ajuste_de_diseño_cuando_cambia_la_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ajuste de diseño cuando cambia la orientación</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uno de los casos en que te interesarán los cambios de orientación es cuando quieras evaluar el diseño de tu contenido en función de la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, tal vez desees que una barra de botones se extienda a lo largo de la pantalla del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si utilizas una consulta multimedia, puede hacer esto fácilmente y de forma automática.</span></span></p>
<h3 id="Construir_el_CSS_para_cada_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Construir el CSS para cada orientación</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para este caso práctico, necesitarás dos hojas de estilo: una para ser usada cuando el dispositivo está en orientación vertical (su altura es mayor que su anchura) y la otra que se utiliza cuando el dispositivo está en posición horizontal (su ancho es mayor a su altura).</span></span></p>
<table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Vertical</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Horizontal</span></span></td> </tr> <tr> <td> <p><code>#toolbar {</code><br> <code>   width: 100%;</code><br> <code> }</code><br> <code> </code></p> </td> <td><code>#toolbar {</code><br> <code>   min-height: 500px;</code><br> <code>   width: 125px;</code><br> <code>   margin-right: 8px;</code><br> <code>   float: left;</code><br> <code> }</code><br> <code> </code></td> </tr> </tbody>
</table>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Como puedes ver si analizas los dos fragmentos de CSS anteriores, en el modo vertical, hacemos que la barra de herramientas se extienda horizontalmente en la parte superior de la ventana, con el fin de maximizar el espacio horizontal disponible para el contenido.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el modo horizontal, la barra de herramientas se extiende verticalmente por el lado izquierdo del documento.</span></span></p>
<h3 id="La_aplicación_del_CSS_correcto_en_función_de_la_orientación_actual"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La aplicación del CSS correcto en función de la orientación actual</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo único que tienes que hacer ahora es establecer las consultas multimedia que seleccionará automáticamente el archivo CSS correcto basado en la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto es sencillo:</span></span></p>
<pre class="brush: css">&lt;link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"&gt;
&lt;link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"&gt;
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A partir de ahora, la carga de los contenidos da como resultado la disposición correcta que se aplicará en función de la orientación del dispositivo.</span></span></p><h2 id="Procesamiento_de_eventos_de_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Procesamiento de eventos de orientación</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ gecko_minversion_header("1.9.2") }}</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox 3.6 (Gecko 1.9.2) introdujo el evento <code>MozOrientation</code>, al que puedes prestar atención con el fin de recibir las actualizaciones mientras el usuario ajusta la orientación del dispositivo.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En la actualidad, este es compatible con algunos dispositivos móviles (Windows Mobile, por ejemplo) y en el MacBook de Apple y los equipos MacBook Pro.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo único que tienes que hacer para comenzar a recibir los eventos de orientación es lo siguiente:</span></span></p>
<pre class="brush: js">window.addEventListener("MozOrientation", handleOrientation, true);</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Después de registrar tu escucha de eventos (en este caso, una función de JavaScript llamada handleOrientation()), la función de escucha se llama de forma periódica con la orientación de datos actualizada.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El evento de orientación contiene tres valores:</span></span></p>
<table class="standard-table"> <tbody> <tr> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Campo</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Tipo</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Descripción</span></span></td> </tr> <tr> <td><code>x</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La cantidad de inclinación a lo largo del eje X.</span></span></td> </tr> <tr> <td><code>y</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La cantidad de inclinación a lo largo del eje Y.</span></span></td> </tr> <tr> <td><code>z</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El importe de la inclinación a lo largo del eje Z.</span></span></td> </tr> </tbody>
</table>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los valores de <code>x</code> , <code>y</code> y <code>z</code> pueden variar desde -1 a 1, donde 0 significa que el dispositivo está en equilibrio sobre ese eje.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La función de controlador o manejador de eventos puede ser algo así:</span></span></p>
<pre class="brush: js">function handleOrientation(orientData) {
  var x = orientData.x;
  var y = orientData.y;
  var z = orientData.z;

  // Haz cosas con los datos de orientación nuevos
}
</pre>
<h3 id="Los_valores_del_acelerómetro_explicados"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los valores del acelerómetro explicados</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor indicado para cada acceso indica la cantidad de la aceleración a lo largo de ese eje que está teniendo lugar actualmente.</span></span></p>
<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><strong>Nota:</strong> en esta sección se describe cómo estos valores funcionan en la actualidad, sin embargo, esto está sujeto a cambios en un futuro.</span></span></div>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje X representa la cantidad de inclinación de derecha a izquierda.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este valor es 0 si el dispositivo está a nivel del eje X, y se aproxima a 1 si el dispositivo se inclina hacia la izquierda, y -1 si el dispositivo se inclina hacia la derecha.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje Y representa la cantidad de inclinación de adelante hacia atrás.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El valor es 0 si el dispositivo está a nivel del eje Y, y se aproxima a 1 a medida que inclinas el dispositivo hacia atrás (lejos de ti) y -1 si inclinas el dispositivo hacia el frente (hacia ti).</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje Z representa la aceleración vertical.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor es 1 cuando el dispositivo está pasando por la gravedad terrestre estándar (9.8m/sec <sup>2),</sup> pero no en movimiento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al mover el dispositivo hacia arriba hace que el valor descienda.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El valor es 0 si el dispositivo está en caída libre (ingrávido o precipitándose como consecuencia de una caída).</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En ingravidez, todos los valores será igual a cero cuando el dispositivo no se mueva, independientemente de su orientación, y sólo cambiará cuando se acelere.</span></span></p><h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta también</span></span></h2>
</a><ul><a> </a><li><a><code></code></a><code><a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation">MozOrientation</a></code></li> <li><a class=" external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/"><span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Una breve introducción a las consultas multimedia en Firefox 3.5</span></span></a></li>
</ul>
<p>{{ languages ( { "en": "en/Detecting_device_orientation" } ) }}</p>