为什么Android和iOS浏览器默认情况下渲染网站比设备屏幕宽度更宽？

Question

我在我的网站中使用了以下代码来防止Android浏览器将其渲染得比屏幕分辨率更宽.这是我在本网站上找到的代码,但在准备提出这个问题时,我无法再找到原始问题以供参考.

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

首先,这段代码有效.浏览器最初渲染的页面大约是屏幕分辨率的三倍,Opera Mini也做了同样的事情.将这两行插入我的后<head>,问题就消失了,页面也应该呈现.我记得在答案中提供了这个代码,这个异常宽度是由WebKit渲染引擎引起的,其中包括Android和iOS浏览器.

问题:有没有人知道为什么WebKit会覆盖屏幕分辨率并以高于屏幕的分辨率呈现页面？

Answer 1

它与手机的默认视口设置有关.这本身并不是WebKit所做的,而是设备上浏览器的实现.以下是一些默认布局宽度:Safari iPhone使用980px,Opera 850px,Android WebKit 800px和IE 974px.