Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde,
Eu estou com dor de cabeça com a altura da viewport de dispositivos mobile e já tentei todo tipo de hack do bem para evitar que o conteúdo trema na rolagem.
O problema não ocorre em PC nos navegadores IE, Firefox, Chrome, Edge, Safari e Opera nem no MAC nos navegadores Chrome, Safari e Firefox.
Mas como quase todos os navegadores mobile têm um redimensionamento automático com a rolagem da página você acaba tendo problema com recursos como o “top:100%” com “position:absolute” na rolagem do conteúdo (o navegador mais problemático é o Chrome de IOS).
Isso ocorre também com background, mesmo com recurso o “background-cover: cover;” e o “background-size: cover;” configurados (detalhe que eu configurei os prefixos -webkit-, -moz-, -ms-, -o- e -vendor-).
Segue a META que eu estou usando (acredito que o problema seja em parte por causa dela, mas preciso dela para que a resolução fique adequada para dispositivos mobile)
Estou usando essa META no site em que estou desenvolvendo, pois quero que o usuário não de zoom no site (por causa do layout).
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1">
Mas testei a mesma META com "user-scalable=yes" e não adiantou.
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes,maximum-scale=1">
Segue meu código CSS:
#texto_sombra {
font-family:"Trebuchet MS", tahoma, verdana, arial;
font-size:35px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.80);
text-align:center;
color:#FFFFFF;
bottom: 80px;
display: block;
left: 50%;
position: absolute;
width: 400px;
z-index:1 !important;
}
#container_pai {
top:100%;
width:80%;
margin-left:10% !important;
margin-right:10% !important;
height:600px;
background:#fff;
position:absolute;
padding:0px;
display:block;
z-index:20 !important;
}
#backgroup {
background: url([http://wallpaper.ultradownloads.com.br/118363_Papel-de-Parede-Campo-Aberto--118363_1600x1200.jpg](http://wallpaper.ultradownloads.com.br/118363_Papel-de-Parede-Campo-Aberto--118363_1600x1200.jpg));
background-position: center center;
background-repeat: no-repeat;
position:fixed;
z-index:-1;
display:block !important;
width: 100%;
height: 100%;
min-width:100%;
min-height:100% !important;
right:0px;
bottom:0px !important;
margin: 0px;
overflow:hidden;/AJUSTE/
-webkit-background-cover: cover;
-vendor-background-cover: cover;
-moz-background-cover: cover;
-ms-background-cover: cover;
-o-background-cover: cover;
background-cover: cover;-webkit-background-size: cover;
-vendor-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;Segue meu código HTML:
<div id="texto_sombra">Titulo da Página</div>
<div id="container_pai"></div>
<div id="backgroup"></div>Visão do código no jsfiddle:
https://jsfiddle.net/mauriansoares/xy01xL7z/
Se alguém puder ajudar
Eu tentei fazer isso.
Criei uma DIV que recebia o height via uma variável em javascript.
Chegue a colocar animações de CSS via javascript para suavizar o redimensionamento da Viewport por causa da barra de endereço.
Mas não consegui resolver o problema.
Segue o meu código:
Javascript:
<script type="text/javascript">
function DivAltura(id) {
var stage = window.innerHeight|| document.body.clientHeight;
document.getElementById("blocoLivre").style.height = stage+"px";document.getElementById("blocoLivre").style.transition = "all 0.2s";
}
</script>HTML:
<body onLoad="DivAltura('blocoLivre')" onresize="DivAltura('blocoLivre')">
<div id="blocoLivre"></div>// Conteúdo do site
Um detalhe importante, o problema não aparece no navegador padrão do Android e no Opera Coast.
No safari ele é muito sutil, pois sua Viewport não tem um redimensionamento grande.
Já no Chrome e no Firefox o problema é mais evidente.
Dispositivos em que eu fiz testes:
Ipad Air 9.7″ com IOS 9
Iphone 4 com IOS 7
Tablet Samsung Galaxy Tab4 10.1″ com android 4.4
M.s.s,
Quando é criado a estrutura de um site e você necessita da utilização de um JS para corrigir problemas, então a elaboração do HTML / CSS (Responsivo) foi feita de forma incorreta. A ideia de um site responsivo é que as coisas se ajustem de forma que encaixem na viewport do dispositivo, nada mais além disso.
Caso queira fazer um teste, inicie um projeto com Bootstrap, monte-o sem editar nenhum documento css e veja se o mesmo problema ocorre nos dispositivos em questão.
Aconselho ler os seguintes sites:
Abraços!
O problema é que a tela treme com o "TOP:100%" na hora que a Viewport se ajusta, não há uma transição suave.
O mesmo acontece se você usar um javascript para forçar uma DIV a ter 100% de height via variável que passa o valor em pixel.
Acho que o problema em parte é a meta tag.
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes,maximum-scale=1">
Detalhe, que a mesma página não treme se eu não usar o "TOP:100%" ou Script para forçar o height em uma DIV para esconder o conteúdo.
Na verdade o que provoca esse "efeito" é a barra de endereço, que ao descer o scroll (celular) ela é oculta, fazendo com que a altura do browser aumente alguns pixels (porque ocupa o espaço que antes tinha a barra de endereço), e ao subir ela aparece novamente, diminuindo a altura.
Não sei se tem como resolver isto por CSS, mas você poderia usar JavaScript... quando a página for carregada, você pega a altura da janela e coloca ela fixa (em px) no elemento... aí ela não altera mais.