2010-11-16 19 views
2

J'ai utilisé le code suivant sur mon site pour empêcher le navigateur Android de le rendre plus large que la résolution de l'écran. C'est le code que j'ai trouvé sur ce site mais en me préparant à poser cette question, je n'ai pas pu retrouver la question originale à titre de référence.Pourquoi le navigateur Android et iOS rend-il le site plus large que la largeur de l'écran de l'appareil par défaut?

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

Pour commencer, ce code a fonctionné. À l'origine, le navigateur rendait la page trois fois plus large que la résolution de l'écran, et Opera Mini a fait la même chose. Après avoir inséré ces deux lignes dans mon <head>, le problème a disparu et la page a été rendue comme elle devrait être. Je me souviens de la réponse qui a fourni ce code que cette largeur anormale a été causée par le moteur de rendu WebKit qui alimentait, entre autres, les navigateurs Android et iOS.

Question: Est-ce que quelqu'un sait pourquoi WebKit remplace la résolution d'écran et rend la page à une résolution supérieure à celle pouvant être acceptée à l'écran?

Répondre

6

Cela concerne les paramètres de fenêtre par défaut du téléphone. Ce n'est pas, en soi, le fait de WebKit, mais plutôt l'implémentation du navigateur sur l'appareil. Voici quelques largeurs de mise en page par défaut: Safari iPhone utilise 980px, Opera 850px, Android WebKit 800px et IE 974px.

Vous pouvez vérifier dans ces derniers pour plus d'informations: http://www.quirksmode.org/mobile/viewports.html & http://www.quirksmode.org/mobile/viewports2.html