0

Como resolver o bug de viewport no Windows Phone?

Uso o código abaixo, que é para ele trocar o background no Smartphone, mas ele continua com o background de 1200px.

@media (max-width: 767px) {
.jumbotron.top {background:url('../images/topo_xs.jpg');} 
}

Devo usar o:

@-ms-viewport {  width :  device-width ;  }

Mas não entendi muito bem como! Alguém poderia explicar?

1 Resposta 1

1

Esse é um bug recorrente, que a Microsoft nunca soube como atacar com coerência. Talvez agora, com o desligamento das maquinas do IE as coisas se ajustem em termos de browser por lá. Eles publicaram um update uma vez (este, se não me engano), dizendo que corrigiram o bug, mas, como eu disse, ele é recorrente.

Enfim, uma solução nada elegante (e talvez não atual), é a seguinte: Insira as seguintes tags no seu cabeçalho:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Juntamente com o seguinte código, também no cabeçalho:

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );
    document.getElementsByTagName("head")[0].
        appendChild(msViewportStyle);
}

Este código atua apenas quando o navegador é o IE10 mobile. Na maioria dos casos, ele resolve o problema do viewport. Como eu disse, é um fix não muito elegante, que foi discutido em detalhes aqui.

Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .