ChengXuYuan.com
程序员的职场第一站

前端如何适配手机屏幕之viewport

后台有同学留言问什么是响应式的Web设计,我第一反应是,这话题有没有讲过啊。果然一查,发现了这篇《响应式设计是啥》。

响应式设计其实就是前端用来达到适配浏览器屏幕、分辨率的一种方法。前面这篇文章讲了响应式设计的概念,归结成一句话就是网页的内容可以根据屏幕的尺寸不同而自动适配,不会出现拉伸、错位的现象。如何保证呢,前文虽然列举了一些常规做法,但是有种高屋建瓴的意思,没有具体的技术,总感觉缺了点什么。实际上,响应式设计是一个很大的话题,就像iOS,Android的屏幕适配一样,涵盖了很多方面。今天咱们先来看看最简单也是最基础的一个概念,viewport。

很早很早的时候,开发者设计网页,往往只考虑到PC上的浏览器。比如我们的桌面屏幕显示器的分辨率是1024*768,他们就真的按照这个大小来摆放网页内的元素。例如现在页面内有一张图片,在CSS里定义是300px*300px的,在桌面显示器上,刚好就对应300个像素*300个像素,所以也不会出什么大问题。

viewport

后来有了智能手机,屏幕突然变小了很多,如何在手机浏览器上正确显示这些PC网页呢?首先有一点可以肯定的时候,网页还是要按照原来的大小和位置进行排版,不然会破坏原有页面的结构。为此苹果引入了viewport的概念。viewport俗称视口,用来描述一块区域,浏览器可以在这块区域上去排版、渲染网页。前面说了,默认情况下,这块区域的大小要和PC非常接近才能不破坏页面结构,所以Apple选了一个值,宽980px。后来Android也采取了这个值,慢慢大家都采取了这个值。

你可以理解成,浏览器默认情况下,会有一个viewport,它可能比手机屏幕大很多,浏览器就在它上面去排版网页。

手机屏幕适配

但是,很显然,手机屏幕毕竟只有那么大,要想展示完整的PC网页,浏览器有两个选择:

1、排版完成之后,缩放到手机屏幕那么大小,这样会模糊一些。

2、给网页加上一个滚动条,让用户自己滚去吧。

要想完美解决这个问题,只能对现有的页面进行回炉重造了。问题是,到底要按照多大的屏幕来进行适配呢?比如有个按钮,设计师想让它最好能占屏幕的1/4大小,如果按照最早的iPhone3的宽320px的话,它应该有80px那么宽,但是放到iPhone4上,手机尺寸没变,分辨率变成了640px宽,那这个按钮是不是应该有160px那么宽啊。总不能针对每个机子都要写一遍吧。

办法总是有的,我们可以通过改变css里1px和物理设备的1px之间的换算关系来解决。这么说吧,设计师想要的效果,无非就是那个占屏幕1/4大小按钮,在iPhone3和iPhone4上看起来是一样大的。这个一样大,是指肉眼看上去一样大,而不是像素一样多,因为iPhone4是Retina屏,像素密度高,1英寸的屏幕能放下iPhone3两倍的像素。如果能做到在iPhone3上定义的1px等于物理上的1px,而在iPhone4里定义的1px,等于物理2px,那80px的按钮,在两个机子上的长度实际上是一样的。

正如我们前面讲安卓里面的dp的时候说过,dp是一个和米、厘米一样的物理长度,css里的px单位也是这样的。而到底这1px是等于真是的1px还是2px,要根据手机的屏幕密度来算,密度越大,css的1px能表示的真实px越多。

有了这层换算关系,密度小的我们就少算点儿,密度大的就多算点,这样我们就可以假定,在css的世界里,宽最多就只有320px那么大了。当然,这只是假设,有的手机是360px、380px、400px,这个是由一个叫devicePixelRatio的值决定的,iOS和Android不一样,Android和Android也不一样。怎么做到兼容呢?

这里就需要另一个viewport了,我们现在把viewport的width写成device-width。前面说了,浏览器默认的viewport是很大的,有980px那么大,如果你把viewport写成device-width,它就会根据不同手机来取值,这个值会小很多,在320px附近,具体多大,不确定,但是它一定是显示出来最完美的。

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

总结一下,viewport是一块区域,手机上的浏览器为了适配桌面上的网页,把它设置成980px那么大,但是这样的网页即使能正确的显示出来也得缩放或者用滚动条,所以我们在写前端网页的时候,会用一个width=device-width的viewport,这样我们css里看到的屏幕总宽度大概在320px左右,1px代表的物理像素数会自动根据屏幕密度进行换算。这样,我们就完成了设计师的目标:「标注80px的按钮,在不同的手机上,看起来是一样大的」。

你可能会问,上面那个initial-scale=1是个什么鬼,下回讲。当然前端还有很多适配屏幕的办法,下下回讲。

作者:果果

文章出处:给产品经理讲技术(订阅号ID:pm_teacher)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址