建站百科

文章导读：本文主要阐述了“网站如何适配手机屏幕之viewport”今天咱们先来讲讲网站适配手机屏幕最简单也是最基础的一个概念，viewport，viewport是网页定义中的一段meta标签描述，它的目的在...，本文由跨屏网最后更新于2020-07-24，全文共1960个字，预计阅读时长6分32秒。

响应式设计其实就是前端用来达到适配浏览器屏幕、分辨率的一种方法，结成一句话就是网页的内容可以根据屏幕的尺寸不同而自动适配，不会出现拉伸、错位的现象，而其中用到的就有viewport。

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

后来有了智能手机，屏幕突然变小了很多，如何在手机浏览器上正确显示这些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是个什么鬼，下回讲。当然前端还有很多适配屏幕的办法，下下回讲。

写在最后，以上就是对于“网站如何适配手机屏幕之viewport”的一些看法，欢迎指正、交流。

网站题目：网站如何适配手机屏幕之viewport
网站URL：http://test.kuaping.com/article/show164.html