Como definir meta viewport para iPhone que alças de rotação corretamente?

Question

Então, eu tenho usado:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

para obter o meu conteúdo HTML para exibir bem no iPhone. Ele funciona muito bem até que o usuário roda o dispositivo no modo paisagem, onde o visor permanece limitado a 320 pixels.

Existe uma maneira simples para especificar uma janela de visualização que as mudanças na resposta ao usuário mudar o a orientação do dispositivo? Ou devo recorrer a usar o Javascript para lidar com isso?

Answer 1

Foi apenas tentando resolver isso eu mesmo, e a solução que surgiu foi:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Este parece bloquear o dispositivo em 1,0 escala, independentemente da sua orientação. Como efeito colateral, ele faz no entanto desativar completamente o dimensionamento do usuário (zoom pitada, etc).

Answer 2

Para qualquer um interessado ainda:

http://wiki.phonegap.com/w/page / 16494815 / Prevenir-Scrolling-on-iphone-PhoneGap-Applications

A partir da página:

<meta name="viewport" content="user-scalable=no,width=device-width" />

Esta instrui Safari para evitar o usuário de zoom na página com o gesto "pinch" e corrige os largura da janela de visualização para a largura de a tela, que nunca orientação iPhone está em.

Answer 3

Você não quer perder a opção de usuário de escala se você pode ajudá-lo. Eu gosto desta solução JS de aqui .

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

Answer 4

Eu tenho chegar a uma abordagem slighly diferente que deve funcionar em plataformas cruzadas

http: //www.jqui .net / dicas-tricks / fixação-a-auto-escala-on-dispositivos móveis /

Até agora eu testei no

Samsun Galaxy 2

• Samsung Galaxy S
• Samsung Galaxy S2
• Samsung Galaxy Note (mas teve que mudar o css para 800px [ver abaixo] *)
• Motorola

• iPhone 4

  • @media screen and (max-width:800px) {

Este é um lábio enorme para a frente com desenvolvimento móvel ...

Answer 5

Você está definindo-o para não ser capaz de escala (escala máxima = escala inicial), por isso não pode escalar para cima quando você gira para o modo paisagem. Set escala máxima = 1,6 e ele será ampliado adequadamente para o modo paisagem em forma.

Answer 6

Eu tive esse problema eu mesmo, e eu queria tanto ser capaz de definir a largura, e tê-lo atualizar sobre rotação e permitir que o usuário escala e ampliar a página (a resposta atual fornece a primeira, mas impede a mais tarde como um side-effect) .. então eu vim com uma solução que mantém a visão de largura correta para a orientação, mas ainda permite o zoom, embora não é super simples.

Primeiro, adicione o seguinte Javascript para a página que você está exibindo:

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

Então em seu - didRotateFromInterfaceOrientation (void): (UIInterfaceOrientation) fromInterfaceOrientation método, add:

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

Ajustes do Sistema adicional pode ser feito modificando mais das configurações de conteúdo viewportal:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone-- iPads-Viewport-Orientação Utilizando-JavaScript-CSS-and-Meta-Tags.htm

Além disso, eu entendo que você pode colocar um ouvinte JS para onresize ou algo parecido para acionar o reescalonamento, mas isso funcionou para mim como eu estou fazendo isso a partir de estruturas Cocoa Touch UI.

Espero que isso ajude alguém:)

Answer 7

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

suport todos os iphones, ipads todos, todos os andróides.

Answer 8

apenas quer compartilhar, eu tenho jogado ao redor com as definições da janela de visualização para o meu design responsivo, se eu definir a escala máxima a 0,8, a escala inicial para 1 e escalável para qualquer então eu obter o menor vista no modo retrato e o ponto de vista do iPad para a paisagem: D ... isto é propriamente uma gambiarra, mas parece funcionar, eu não sei por que eu não vou usá-lo, mas os resultados interessantes

<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />

aproveitar:)

Answer 9

Porque não basta recarregar a página quando o usuário gira a tela com javascript

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);