Why do Android and iOS browser render site wider than the device screen width by default?_问答_开发者

Why do Android and iOS browser render site wider than the device screen width by default?

开发者 https://www.devze.com 2023-01-25 22:19 出处：网络

I have used the following code in my site to prevent the Android bro开发者_开发技巧wser from rendering it wider than the screen resolution. It\'s code that I found on this site but while preparing to

相关专题：webkit

I have used the following code in my site to prevent the Android bro开发者_开发技巧wser from rendering it wider than the screen resolution. It's code that I found on this site but while preparing to ask this question I was unable to find the original question again for reference.

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

To start with, this code worked. The browser was originally rendering the page to be about three time as wide as the screen resolution, and Opera Mini did the same. After inserting these two lines into my <head>, the problem went away and the page was rendered as it should be. I remember from the answer that provided this code that this abnormal width was caused by the WebKit rendering engine that powered, among others, the Android and iOS browsers.

Question: Does anyone know why WebKit overrides the screen resolution and renders the page at a resolution greater than can be accommodated on the screen?

It has to do with the phone's default viewport settings. This is not, per se, WebKit's doing, but rather the implementation of the browser on the device. Here are some default layout widths: Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

You could check into these for more info: http://www.quirksmode.org/mobile/viewports.html & http://www.quirksmode.org/mobile/viewports2.html