ti-enxame.com

Atingindo a largura mínima com a metatag da viewport

Gostaria que largura da janela de visualização da minha página da Web fosse igual a largura do dispositivo contanto que largura do dispositivo> 450px ou 450px (caso contrário, meu layout será dimensionado dinamicamente) , mas não fica bem abaixo de 450 px de largura).

As duas metatags a seguir funcionam bem em tablets, em que a largura do dispositivo> 450px:

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

no entanto, em telefones (onde, por exemplo, largura do dispositivo = 320 px), o primeiro é muito fino para o conteúdo; e o último faz com que o navegador aumente o zoom; portanto, o usuário precisa diminuir o zoom manualmente para ver o conteúdo.

Como alternativa, essa metatag funciona bem em telefones

<meta name="viewport" content="width=450" />

mas não tira proveito da largura extra disponível em tablets.

Qualquer ajuda/idéias seria muito apreciada (e se isso fizer diferença, estou usando o GWT).

58
Tom G

Então, você deseja alterar dinamicamente a largura das tags viewport.

Aqui está :

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');
}
</script> 

Veja: http://www.quirksmode.org/mobile/table Viewport.html

37
Suresh Atta

Tente o seguinte:

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
    if (screen.width < 450) {
        var mvp = document.getElementById('vp');
        mvp.setAttribute('content','user-scalable=no,width=450');
    }
}
</script>

Observe que troquei a "escala inicial = 1", pois acho que você entendeu errado. Você deseja que initial_scale seja definido como 1 quando width = width do dispositivo, para que a página caiba exatamente na janela. Quando você define uma largura de janela de exibição específica, não deseja definir a escala inicial como 1 (caso contrário, a página começará ampliada).

16
CpnCrunch

use uma tag @media e css. Faz maravilhas. Embora não forneça uma largura mínima para a porta de visualização, este é o caminho preferido.

Aqui está o que eu faço para a viewport:

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

Depois, ajusto o tamanho do painel conectado ao viewPort:

@media all and (max-width: 1024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

Obviamente, você também pode ter tamanhos intermediários ...

veja mais em outro exemplo

5
user1258245

O código JavaScript fornecido nas outras respostas não funciona no Firefox, mas funcionará se você remover a metatag e inserir uma nova.

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

Ou apenas sempre o insira em JavaScript:

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

Para minha sanidade, escrevi um polyfill para adicionar apenas um atributo min-width à meta tag da viewport:

Definir largura mínima na metatag da janela de exibição

Com isso, você pode simplesmente fazer:

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
3
Brendan Long

Resumindo, não há necessidade de definir largura mínima na viewport, pois você pode configurá-la no elemento body ou html, para torná-los e seu conteúdo mais amplo que a viewport. O usuário poderá rolar ou reduzir o conteúdo.

body {
  min-width: 450px;
}

Eu fiz alguns testes em Chrome para Android e ele aumenta a fonte de alguns elementos se a largura da viewport estiver definida como algo diferente de device-width. Também shrink-to-fit=yes é útil para reduzir inicialmente uma página.

Por fim, essa abordagem oferece suporte a navegadores de desktop que podem ter tamanhos de janela estranhos ou configurações atuais de zoom (que afetam as dimensões da viewport relatadas), mas não respeitam a metatag da viewport.

1
Andrew Svietlichnyy