html中的viewport分析

最近做的一个推广性质的web页遇到了适配问题,在移动浏览器(iphone 5s的safari)上显示文字很小,整个网页有种被缩小的感觉,但内容显示是全的。解决方法很简单,在head标签中加入

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

即可。

之前了解过viewport的知识,但云里雾里,于是趁吃完饭空闲时间在深入一番。

在深入viewport之前,先了解一个变量devicePixelRatio(简写为dpr),dpr可以理解为css样式中的1px需要真实设备屏幕横向或纵向多少个像素来表示,这个变量是window的属性,通过

alert(window.devicePixelRatio);

可以打印不同设备浏览器的dpr值。我的5s中safari打印出来是2,也就是css中一1px需要2x2个像素点来显示。通过这个概念要知道我们写的样式里的px并非设备的像素。这其中的转化是浏览器做的,由浏览器保证我们写的样式在高分屏和普通屏显示效果是差不多的,这点跟android的dp很像。下文css中涉及到像素我用npx来表示,防止跟设备像素搞混。

那么viewport到底是个什么东西。好多文章译为“视口”,其实跟tcp协议中的滑动窗口有异曲同工之妙,可以简单理解为在原始文档上蒙上黑布,viewport就是在黑布上切开一个矩形的口子,这个口子的大小决定了我能看到的内容的多少。比如一个网页文档的html源码如下(求简便,直接在style中写样式了)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="width:1200npx;height:400npx;background:red;">
我是div中的文字
</div>
</body>
</html>

那么该文档的长为1200npx,而我的浏览器为我开了个长为1440npx(边边角角忽略掉)的扣子,那么这个文档我能全部看到,两边还能看到留白。如果很不幸我的浏览器只能给我开个长为980npx的口子,那我只能看到文档的左边的那部分,滚动条就会出现啦,需要向右滑动才能看到后面的内容。

但是我的5s 的safari默认就给我开的是长为980npx的口子(不设置viewport),于是打开上面的网页就会出现滚动条。我把网页中div的宽度改成320px,那safari浏览器中左上角会出现一个红矩形,其他地方是空白。

如果设置了viewport

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

的话,由于device-width等于320npx(在我的5s上的safari是这样),所以相当于开了个长为320npx的口子,所以div就满屏显示了,这里要说明下,虽然div满屏显示并且5s的屏幕是640px的宽度,但浏览器内部给css的最大宽度仍然是320npx,width为320npx的元素就是会满屏显示,这个npx到真实物理px的转换是不需要我们去考虑的,这点之前给我理解viewport造成了很大的困扰。同样的,如果我们设置了viewport的width=device-width的话,再把div的css宽度改为640npx,那么就会出现滚动条。

这下再回到之前的问题,以kuqin.com为例(未设置viewport,所以默认为980npx),网页内容的宽度是960npx(即有div设置了宽度为960npx),在5s中是不会出现滚动条的,浏览器把整个内容都显示出来并且放到一块640px真实像素宽的屏幕上,不怪内容会缩小。

而我们看到的缩小的效果是走样式->浏览器->屏幕->人眼这个流程的,不要因为我们眼睛看到的东西干扰对viewport的认识。


你可能感兴趣的:(浏览器,viewport)