¿Cómo bloqueo la orientación en modo vertical en una aplicación web de iPhone?
https://stackoverflow.com/questions/1207008
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy creando una aplicación web para iPhone y quiero bloquear la orientación en modo vertical.¿es posible?¿Existen extensiones de kit web para hacer esto?
Tenga en cuenta que esta es una aplicación escrita en HTML y JavaScript para Mobile Safari, NO es una aplicación nativa escrita en Objective-C.
Solución
Puede especificar estilos CSS según la orientación de la ventana gráfica:Apunte al navegador con body[orient="landscape"] o body[orient="portrait"]
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
Sin embargo...
El enfoque de Apple ante este problema es permitir al desarrollador cambiar el CSS en función del cambio de orientación, pero no impedir la reorientación por completo.Encontré una pregunta similar en otro lugar:
http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
Otros consejos
Esta es una solución bastante hacky, pero al menos es algo (?). La idea es utilizar una transformación CSS para rotar el contenido de su página al modo cuasi-retrato. Aquí está el código JavaScript (expresado en jQuery) para comenzar:
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
El código espera que todo el contenido de su página viva dentro de un div justo dentro del elemento del cuerpo. Gira ese div 90 grados en modo horizontal, de vuelta al retrato.
Izquierda como ejercicio para el lector: el div gira alrededor de su punto central, por lo que probablemente será necesario ajustar su posición a menos que sea perfectamente cuadrada.
Además, hay un problema visual poco atractivo. Cuando cambia la orientación, Safari gira lentamente, luego el div de nivel superior se ajusta a 90 grados diferentes. Para aún más diversión, agrega
body > div { -webkit-transition: all 1s ease-in-out; }
a su CSS. Cuando el dispositivo gira, Safari lo hace y luego el contenido de su página. ¡Seductor!
Esta respuesta aún no es posible, pero la estoy publicando para " generaciones futuras " ;. Con suerte, algún día podremos hacerlo a través de la regla CSS @viewport:
@viewport {
orientation: portrait;
}
Especificaciones (en proceso):
https://drafts.csswg.org/css-device-adapt/#orientation -desc
MDN:
https://developer.mozilla.org/en-US/ docs / Web / CSS / @ viewport / orientación
Según la tabla de compatibilidad del navegador MDN y el siguiente artículo, parece que hay cierto soporte en ciertas versiones de IE y Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag
Esta especificación API de JS también parece relevante:
https://w3c.github.io/screen-orientation/
Supuse que, debido a que era posible con la regla @viewport propuesta, sería posible configurando orientation en la configuración de la ventana gráfica en una etiqueta meta, pero hasta ahora no he tenido éxito con esto .
Siéntase libre de actualizar esta respuesta a medida que las cosas mejoren.
El siguiente código se utilizó en nuestro juego html5.
$(document).ready(function () {
$(window)
.bind('orientationchange', function(){
if (window.orientation % 180 == 0){
$(document.body).css("-webkit-transform-origin", "")
.css("-webkit-transform", "");
}
else {
if ( window.orientation > 0) { //clockwise
$(document.body).css("-webkit-transform-origin", "200px 190px")
.css("-webkit-transform", "rotate(-90deg)");
}
else {
$(document.body).css("-webkit-transform-origin", "280px 190px")
.css("-webkit-transform", "rotate(90deg)");
}
}
})
.trigger('orientationchange');
});
Se me ocurrió este método único de CSS para rotar la pantalla usando consultas de medios. Las consultas se basan en los tamaños de pantalla que encontré aquí . 480px parecía ser bueno ya que ninguno / pocos dispositivos tenían más de 480px de ancho o menos de 480px de altura.
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 320px; /*this is the iPhone screen width.*/
position: absolute;
top: 100%;
left: 0
}
}
Screen.lockOrientation() resuelve este problema, aunque el soporte es menos que universal en ese momento (abril de 2017):
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en -US / docs / Web / API / Screen.lockOrientation
Me gusta la idea de decirle al usuario que vuelva a poner su teléfono en modo vertical. Como se menciona aquí: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... pero utilizando CSS en lugar de JavaScript.
Quizás en un nuevo futuro tendrá una solución lista para usar ...
En mayo de 2015,
hay una funcionalidad experimental que hace eso.
Pero solo funciona en Firefox 18+, IE11 + y Chrome 38+.
Sin embargo, todavía no funciona en Opera o Safari.
Aquí está el código actual para los navegadores compatibles:
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
Esto, o una solución CSS similar, al menos conservará su diseño si eso es lo que busca.
La solución raíz es tener en cuenta las capacidades del dispositivo en lugar de intentar limitarlas. Si el dispositivo no le permite la limitación adecuada, un simple truco es su mejor opción, ya que el diseño es esencialmente incompleto. Cuanto más simple, mejor.
En café si alguien lo necesita.
$(window).bind 'orientationchange', ->
if window.orientation % 180 == 0
$(document.body).css
"-webkit-transform-origin" : ''
"-webkit-transform" : ''
else
if window.orientation > 0
$(document.body).css
"-webkit-transform-origin" : "200px 190px"
"-webkit-transform" : "rotate(-90deg)"
else
$(document.body).css
"-webkit-transform-origin" : "280px 190px"
"-webkit-transform" : "rotate(90deg)"
Si bien no puede evitar que el cambio de orientación surta efecto, no puede emular ningún cambio como se indica en otras respuestas.
Primero detecte la orientación o reorientación del dispositivo y, usando JavaScript, agregue un nombre de clase a su elemento de ajuste (en este ejemplo, uso la etiqueta del cuerpo).
function deviceOrientation() {
var body = document.body;
switch(window.orientation) {
case 90:
body.classList = '';
body.classList.add('rotation90');
break;
case -90:
body.classList = '';
body.classList.add('rotation-90');
break;
default:
body.classList = '';
body.classList.add('portrait');
break;
}
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();
Luego, si el dispositivo es horizontal, use CSS para establecer el ancho del cuerpo a la altura de la vista y la altura del cuerpo al ancho de la vista. Y dejemos que & # 8217; s establezcamos el origen de la transformación mientras & # 8217; estamos en ello.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Ahora, reoriente el elemento del cuerpo y deslícelo (traduzca) a su posición.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Inspirado en la respuesta de @ Grumdrig, y debido a que algunas de las instrucciones utilizadas no funcionarían, sugiero el siguiente script si alguien más lo necesita:
$(document).ready(function () {
function reorient(e) {
var orientation = window.screen.orientation.type;
$("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
}
$(window).on("orientationchange",function(){
reorient();
});
window.setTimeout(reorient, 0);
});
Haga clic aquí para ver un tutorial y trabajar ejemplo de mi sitio web.
Ya no necesita usar hacks solo para mirar la orientación de la pantalla de jQuery Mobile ni debe usar PhoneGap más, a menos que realmente esté usando PhoneGap.
Para que esto funcione en el año 2015 necesitamos:
- Cordova (cualquier versión aunque sea superior a 4.0 es mejor)
- PhoneGap (incluso puedes usar PhoneGap, los complementos son compatibles)
Y uno de estos complementos dependiendo de su versión de Cordova:
- net.yoik.cordova.plugins.screenorientation (Cordova < 4)
complemento cordova agregar net.yoik.cordova.plugins.screenorientation
- plugin cordova add cordova-plugin-screen-orientación (Cordova > = 4)
plugin cordova add cordova-plugin-screen-orientación
Y para bloquear la orientación de la pantalla solo use esta función:
screen.lockOrientation('landscape');
Para desbloquearlo:
screen.unlockOrientation();
Posibles orientaciones:
vertical primario La orientación está en el modo vertical primario.
retrato-secundario La orientación está en el modo de retrato secundario.
landscape-primary La orientación está en el modo horizontal primario.
paisaje-secundario La orientación está en el modo de paisaje secundario.
retrato La orientación es retrato-primaria o retrato-secundaria (sensor).
paisaje La orientación es paisaje primario o paisaje secundario (sensor).
