Como definir meta viewport para iPhone que alças de rotação corretamente?
Pergunta
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?
Solução
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).
Outras dicas
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.
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>
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 ...
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.
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:
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:)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
suport todos os iphones, ipads todos, todos os andróides.
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:)
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);