1 min read

从meta viewport聊起

iPhone 4s的参数:

960-by-640-pixel resolution at 326 ppi

长960像素,宽640像素,ppi指pixels per inch,每英寸长度的像素数。

但Safari里,渲染页面默认是按980px宽来的。

比如如下的HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iOS7 safari</title>
</head>
<body>
  <div>陈三</div>
</body>
</html>

CSS规则:

div{
  width:980px;
  background-color:green;
  color: white;
  font-size:100px;
}

Safari里该页面效果:

ios7 safari 980px

一个自称宽为640像素宽的手机,带的一个浏览器却可以布置一个980px的div块。

怎么回事?

问题在于viewport1

在Safari里,默认视口宽度为980px。你可以把它想像成桌面浏览器宽度为980px的样子。

所以,上面的HTML代码,我们写成:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=980"><!-- 加了这一句 -->
  <title>iOS7 safari</title>
</head>
<body>
  <div>陈三</div>
</body>
</html>

效果跟上面是一样的。

(如果你愿意做个试验,不断增加contentwidth的值,会发现,width值超过1293时,safari底部会出现横向滚动条。这是否意味着640像素宽的4S屏幕最多只能把握1293px?有待说明。)

设计自适应页面时,我们常常能看到content的另外一个取值:

<meta name="viewport" content="width=device-width">

这一句的意思是,把viewport的宽度设置为device-width(设备宽度)。

拿4s手机说,我们马上能想到,viewport的宽度为640像素。

但这个判断是错的,viewport的值是320px,可以通过设置

<meta name="viewport" content="width=320">

来验证。这一句的效果跟设置content="width=device-width"是一样的。

也就是说,所谓的device-width,在4s手机上的取值是320px。是640/2得来的(2是4S的device pixel ratio取值)。

这看起来简直混乱且莫名其妙。

但如果从「适用」的角度说,就能理解这混乱。早期的15寸、17寸CRT显示器,那时屏幕分辨率通常就1024×768,甚至更小,800×600,同样大小的字体,比如14px,在15寸屏幕上可以看清楚,但换成同样分辨率大小仅3.5寸的屏幕,还看得清楚吗?这会招致使用上的问题。

于是在手机上,我们需要做些调整。14px的字体,我们会用更多的物理像素来表示。

这里,两个概念需要区别,一是CSS的px单位,二是物理像素。

CSS里定义的px,是会变的,它不是绝对单位,比如1cm就是1cm,走遍地球都一样。我们借助一张图片来说明,这张图片大小为710×425 px(注:图片来自维基):

  1. content="width=980"

    width=980 css px

  2. content="width=320"

    width=320 viewport

这张长710px的图片,物理尺寸却完全不一样。我们通过改变viewport的值,改变了单位px的绝对长度。

但4S手机的物理像素不会变,不可能因为我们改个viewport的值苹果就得调整4S的参数页面。

所以设计师给4S手机设计网页时,敲下640×960的图片大小,我们就知道,前端的不和谐长存。

报告问题 修订