Minha página apresenta bugs quando visualizada na vertical, além disso ela é melhor visualizada na horizontal.
É possível forçar para que uma página abra sempre na horizontal em dispositivos móveis? E permaneça fixa na horizontal.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeMinha página apresenta bugs quando visualizada na vertical, além disso ela é melhor visualizada na horizontal.
É possível forçar para que uma página abra sempre na horizontal em dispositivos móveis? E permaneça fixa na horizontal.
Você quer desativar o recurso do dispositivo móvel que reorienta a visualização de acordo com a posição do mesmo? Isso não é possível.
O que você pode fazer é adaptar o seu layout para que apareça "sem bugs" na posição vertical.
Você pode determinar uma largura mínima usando CSS:
#conteudo {
min-width: 640px;
}
Você pode usar media queries, um recurso do CSS para aplicar determinadas regras de acordo com características do visualizador, tornando o design da página "responsivo".
Fica difícil ajudar mais sem vermos alguma imagem ou código (de preferência ambos).
Outra coisa meio doida que você pode fazer é usar JavaScript para verificar se está na vertical (altura > largura) e, se estiver, aplicar uma classe CSS para rotacionar a tela em 90 graus. Desse modo, o usuário será "forçado" a manter o dispositivo na horizontal para ver o site "de pé".
Classe CSS:
.virado {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
JavaScript (com jQuery):
$(window).bind('resize', function() {
if (screen.height > screen.width) {
$('body').addClass('virado');
} else {
$('body').removeClass('virado');
}
});
Debounced Resize()
.
9/02/2014 às 9:35
Um adição a solução do J. Bruni, que está certa é que ocorre um problema que sempre ocorre com listeners em resize é que ele pode ser disparado muitas vezes por segundo e isso pode travar a tela em certos navegadores, em especial em desktop.
Em casos como este, é interessante usar Debounced Resize()
que está descrito em http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
// Plugin. Precisa ser adicionado apenas uma vez
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// Uso do plugin smartresize com a solução de J. Bruni
$(window).smartresize(function(){
if (screen.height > screen.width) {
$('body').addClass('virado');
} else {
$('body').removeClass('virado');
}
});
O código em CSS fica o mesmo
.virado {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}