web-dev-qa-db-fra.com

La balise méta viewport semble être complètement ignorée ou n'a aucun effet

J'ai mis cette balise dans la tête de une page Web :

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

Pour une raison quelconque, cela semble tout simplement être ignoré sur mon iPhone, même l'ajout de user-scalable=no n'a aucun effet. J'ai essayé beaucoup de valeurs de largeur, échelle initiale, etc ... rien ne semble avoir d'effet.

Est-ce que quelqu'un sait ce qui pourrait causer ceci? Je vois clairement dans la source que cela se trouve dans l'en-tête.

Mon iPhone est sur iOS7.

Edit: Le problème persiste sous iOS6 avec le simulateur xcode ios, je ne pense donc pas que cela soit dû à iOS7.

htmliphoneioscss
11
waffl

Ça fonctionne! Sur votre page que vous utilisez:

<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">

Lorsque j'ouvre la page sur mon téléphone (ios7 iphone5), je vois exactement le bon résultat.

Êtes-vous sûr à 100% d'avoir vraiment essayé de mettre les éléments suivants dans votre code?

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

On ne l'ignore pas.

UPDATE1

Je viens de voir que, dans votre code, il semble que vous utilisiez ma deuxième fenêtre, mais j’ai probablement changé de code javascript pour la fenêtre 640 pixels. C’est peut-être la raison pour laquelle vous avez l’impression d’être ignoré. Parce qu'au cours de l'exécution, la fenêtre d'affichage est modifiée ...

UPDATE2

Ok a trouvé le problème.

function updateWidth(){
    viewport = document.querySelector("meta[name=viewport]");
    if (window.orientation == 90 || window.orientation == -90) {
        viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
    }
    else {
        viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
    }
}

Votre page appelle cette fonction qui remplace votre fenêtre d'affichage. Saviez-vous à propos de cette fonction?

28
Andreas Daoutis

Je sais que c’est une vieille question, mais c’est le premier résultat de Google lorsque j’ai eu ce problème, alors j’ai pensé que je mettrais à jour le système pour iOS 10.

Il semble qu'Apple remplace maintenant complètement le user-scalable=no dans iOS 10 afin d'améliorer l'accessibilité

Voir: Twitter Post de Thomas Fuchs

6
ConduciveMammal

La largeur de la fenêtre d'affichage diffère selon les périphériques. iOS en a 320, Android en a 360 en mode portrait. Mode paysage - cela dépend de votre appareil, vous obtiendrez une largeur différente. 

Le meilleur moyen de rendre le site Web optimisé pour le mobile est de définir width = device-width Si vous ne définissez pas initial scale = 1.0, les iOs zooment (agrandissent) l'écran lorsque vous modifiez la rotation du périphérique. 

Cette méta est tout ce dont vous aviez besoin.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Et si vous souhaitez désactiver la fonction de zoom, définissez user-scalable = no

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

Ne pas utiliser la propriété hard code width car elle définira la même largeur pour les modes portrait et paysage, ce qui constitue une expérience utilisateur très déplaisante.

Mieux documenté: https://developer.Apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

À propos de iOs 7 De plus, je dirais - ne vous inquiétez pas pour iOS7 dès maintenant. Il a tellement de bugs. Lire ici: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

5
Shekhar K. Sharma

Vous devriez essayer, comme solution de contournement, le code suivant:

html { 
    zoom: .8; 
}
3
WvdW

Il semble que iOS 7 ne reconnaisse pas correctement la balise méta. Voici les liens qui peuvent vous aider.

webapp n'évoluant pas correctement sous iOS 7

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

2
sourav

Vous ne devriez pas vous inquiéter pour IOS 7, il a tellement de bogues: http://www.infoworld.com/t/html5/bad-news-ios-7s-html5-full-of -bugs-227685

Peut-être que votre code est parfaitement correct mais que vous avez un problème avec iOS?

1
user2836265

Utilisez le code ci-dessous.

<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">

Cela fonctionne bien dans beaucoup de projets miniers.

0
Fahim Parkar