Como faço para bloquear a orientação para o modo retrato em uma aplicação Web iPhone?
https://stackoverflow.com/questions/1207008
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou construindo uma aplicação de iPhone Web e quer bloquear a orientação para o modo retrato. Isso é possível? Há algum extensões web-kit para fazer isso?
Por favor note que este é um aplicativo escrito em HTML e JavaScript for Mobile Safari, não é um aplicativo nativo escrito em Objective-C.
Solução
Você pode especificar estilos CSS com base na orientação janela: Alvo o navegador com o corpo [orient = "landscape"] ou órgão [orient = "retrato"]
http://www.evotech.net / blog / 2007/07 / web-development-for-the-iphone /
No entanto ...
A abordagem da Apple para este problema é permitir que o desenvolvedor para alterar a CSS com base na mudança de orientação, mas não para evitar a re-orientação completamente. Eu encontrei uma pergunta semelhante em outro lugar:
http: // perguntar. metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
Outras dicas
Esta é uma solução bastante hacky, mas é pelo menos alguma coisa (?). A ideia é usar um CSS transformar para girar o conteúdo da sua página para o modo quasi-retrato. Aqui está o código JavaScript (expresso em jQuery) para você começar:
$(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);
});
O código espera que todo o conteúdo da sua página de viver dentro de uma div apenas dentro do elemento do corpo. Ele gira que div 90 graus em modo paisagem -. De volta para retrato
deixada como um exercício para o leitor:. Gira div em torno do seu ponto central, de modo a sua posição provavelmente terá que ser ajustado a menos que seja um quadrado perfeito
Além disso, há um problema visual desagradável. Quando você alterar a orientação, Safari gira lentamente, em seguida, as pressões div de nível superior para 90degrees diferentes. Para se divertir ainda mais, adicione
body > div { -webkit-transition: all 1s ease-in-out; }
para o seu CSS. Quando a rotação do dispositivo, em seguida, Safari faz, em seguida, o conteúdo da sua página faz. Sedutora!
Esta resposta não é ainda possível, mas estou postando isso por "gerações futuras". Esperemos que, algum dia seremos capazes de fazer isso via a regra CSS @viewport:
@viewport {
orientation: portrait;
}
Spec (em andamento):
https://drafts.csswg.org/css-device-adapt/#orientation -desc
MDN:
https://developer.mozilla.org/en-US/ docs / web / CSS / @ viewport / orientação
Com base na tabela de compatibilidade do navegador do MDN e no artigo seguinte, parece que há algum apoio em certas versões do IE e Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag
Esta API Spec JS também parece relevante:
https://w3c.github.io/screen-orientation/
Eu tinha assumido que porque era possível com a regra @viewport proposto, que seria possível através da criação orientation nas configurações da janela de visualização em uma tag meta, mas não tiveram sucesso com este até agora.
Sinta-se livre para atualizar esta resposta como as coisas melhoram.
O código a seguir foi utilizado no nosso jogo 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');
});
Eu vim com esse CSS único método de girar a tela usando consultas de mídia. As consultas são baseadas em tamanhos de tela que eu encontrei aqui . 480px parecia ser um bom como há alguns dispositivos / tinha mais de 480px de largura ou 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() resolve este problema, embora o apoio é menor do que universal no momento (abril de 2017):
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en -US / docs / web / API / Screen.lockOrientation
Eu gosto da idéia de dizer ao usuário colocar as costas telefone em modo retrato. Como é mencionado aqui: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... mas utilizando CSS ao invés de JavaScript.
Talvez em um novo futuro terá um out-of-the-box soludion ...
Como para Maio de 2015,
existe uma funcionalidade experimental que faz isso.
Mas só funciona no Firefox 18+, IE11 +, e Chrome 38 +.
No entanto, ele não funciona no Opera ou Safari ainda.
Aqui está o código atual para os navegadores compatíveis:
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;
}
Este, ou uma solução CSS semelhante, irá, pelo menos, preservar a sua disposição se é isso que você está depois.
A solução de raiz é responsável por capacidades do dispositivo em vez de tentar limitá-los. Se o dispositivo não permite a limitação apropriado do que um truque simples é a sua melhor aposta, desde o design é essencialmente incompleto. Quanto mais simples, melhor.
No café se alguém precisa dele.
$(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)"
Enquanto você não pode impedir a mudança de orientação de tomar o efeito você pode emular nenhuma mudança como indicado em outras respostas.
Primeiro detectar a orientação do dispositivo ou reorientação e, usando JavaScript, adicione um nome de classe para o seu elemento de envolvimento (neste exemplo, eu uso a tag body).
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();
Então, se o dispositivo é paisagem, use CSS para definir a largura do corpo à altura janela ea altura do corpo para a largura viewport. E vamos definir a origem transformar enquanto estamos no assunto.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Agora, reorientar o elemento do corpo e deslizar (traduzir) na posição.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Inspirado de resposta da @ Grumdrig, e porque algumas das instruções utilizadas não iria funcionar, eu sugiro o seguinte script, se necessário por outra pessoa:
$(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);
});
Clique aqui para um tutorial e trabalho exemplo do meu site.
Você não precisa mais hacks uso apenas para olhar Orientação da tela jQuery Mobile nem você deve usar PhoneGap mais, a menos que você está realmente usando PhoneGap.
Para fazer este trabalho no ano de 2015 que precisamos:
- Cordova (qualquer versão que qualquer coisa acima de 4.0 é melhor)
- PhoneGap (você ainda pode usar PhoneGap, plugins são compatíveis)
E um desses plugins dependendo da versão Cordova:
- net.yoik.cordova.plugins.screenorientation (Cordova <4)
cordova plug-in adicionar net.yoik.cordova.plugins.screenorientation
- cordova plug-in adicionar cordova-plugin-screen-orientação (Cordova> = 4)
cordova plug-in adicionar cordova-plugin-screen-orientação
E de bloquear a orientação da tela é só usar esta função:
screen.lockOrientation('landscape');
Para desbloqueá-lo:
screen.unlockOrientation();
orientações possíveis:
-
retrato-primário A orientação está no modo vertical primário. -
retrato-secundário A orientação está no modo vertical secundária. -
paisagem-primário A orientação está no modo paisagem primário. -
paisagem-secundário A orientação está no modo paisagem secundário. -
retrato A orientação é ou. retrato-primária ou secundária-retrato (sensor)
-
paisagem A orientação é ou. paisagem-primária ou secundária-paisagem (sensor)
