Comment définir la méta de la fenêtre d'affichage pour iPhone qui gère correctement la rotation?
https://stackoverflow.com/questions/1230019
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai donc utilisé:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
pour que mon contenu HTML s'affiche correctement sur l'iPhone. Cela fonctionne très bien jusqu'à ce que l'utilisateur fait pivoter l'appareil en mode paysage, où l'affichage reste limité à 320 pixels.
Existe-t-il un moyen simple de spécifier une fenêtre d'affichage qui change en réponse au changement de l'utilisateur orientation de l'appareil? Ou dois-je avoir recours à Javascript pour gérer cela?
La solution
J'essayais juste de résoudre ce problème moi-même, et la solution que j'ai proposée était la suivante:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
Cela semble verrouiller le périphérique à l’échelle 1.0, quelle que soit son orientation. En tant qu'effet secondaire, il désactive toutefois complètement la mise à l'échelle de l'utilisateur (zoom par pincement, etc.).
Autres conseils
Pour ceux qui sont toujours intéressés:
Depuis la page:
<meta name="viewport" content="user-scalable=no,width=device-width" />
Ceci indique à Safari de prévenir l'utilisateur de zoomer sur la page avec le & pinc; pincer " geste et fixe le largeur du hublot à la largeur de l'écran, quelle que soit l'orientation du L'iPhone est arrivé.
Vous ne voulez pas perdre l'option de redimensionnement de l'utilisateur si vous pouvez l'aider. J'aime cette solution JS proposée par ici .
<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>
J'ai mis au point une approche légèrement différente qui devrait fonctionner sur plusieurs plates-formes
http: //www.jqui .net / tips-tricks / réparer-automatiquement-les-appareils-mobiles /
Jusqu'à présent, j'ai testé sur
Samsun galaxy 2
- Samsung galaxy s
- Samsung Galaxy S2
- Samsung Galaxy Note (mais il a fallu changer le fichier css en 800px [voir ci-dessous] *)
- Motorola
-
iPhone 4
-
@media screen et (max-width: 800px) {
-
C’est une avancée massive avec le développement mobile ...
Vous le configurez pour qu'il ne puisse pas être redimensionné (échelle maximale = échelle initiale), de sorte qu'il ne puisse pas être redimensionné lorsque vous passez en mode paysage. Définissez maximum-scale = 1,6 et l’échelle sera correctement adaptée au mode paysage.
J'avais moi-même ce problème et je voulais pouvoir définir la largeur, le mettre à jour en rotation et permettre à l'utilisateur de redimensionner et d'agrandir la page (la réponse actuelle fournit le premier mais empêche le plus tard side-effect) .. donc je suis arrivé avec un correctif qui garde la largeur de la vue correcte pour l'orientation, mais permet quand même de zoomer, bien que ce ne soit pas super simple.
Tout d'abord, ajoutez le code Javascript suivant à la page Web que vous affichez:
<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>
Puis, dans votre méthode - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation, ajoutez:
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];
Vous pouvez effectuer des réglages supplémentaires en modifiant davantage les paramètres de contenu du portail:
De plus, je comprends que vous pouvez utiliser un auditeur JS pour une réduction de taille ou quelque chose comme pour déclencher le redimensionnement, mais cela a fonctionné pour moi, comme je le fais depuis les frameworks de l'interface utilisateur de Cocoa Touch.
J'espère que cela aidera quelqu'un:)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
suportez tous les iphones, tous les ipads, tous les androïdes.
je veux juste partager, j’ai joué avec les paramètres de la fenêtre pour mon design réactif, si je règle l’échelle maximale à 0.8, l’échelle initiale à 1 et l’échelle à non, alors j’obtiens la plus petite vue en mode portrait et la vue iPad pour le paysage: D ... c’est vraiment un vilain coup mais ça semble fonctionner, je ne sais pas pourquoi alors je ne vais pas l’utiliser, mais des résultats intéressants
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />
appréciez:)
Pourquoi ne pas simplement recharger la page lorsque l'utilisateur fait pivoter l'écran avec javascript
function doOnOrientationChange()
{
location.reload();
}
window.addEventListener('orientationchange', doOnOrientationChange);
