千丝海阁

最近一直在暗暗地瞎折腾网站的css样式，由于自己是个主题门外汉，从前阵子改了>1024的宽屏样式，到昨天改了手机下的样式，花了我不少时间。在昨天修改手机样式的时候遇上了一个问题，就是我无论如何调整@media screen的宽度，手机上显示页面虽然是自适应满屏了，但是字体有点小，必须放大才能看清。但是在PC上的浏览器，明显字体是没有问题的。具体效果如下图所示：

一开始我以为手机上的样式需要增大字体，于是去偷瞟了一眼大发和W3Cshare的样式，结果并没有如我所愿的发现有任何放大字体的操作。这样浪费了一个上午，还是没有找到问题的关键。幸好下午无意中被我发现了meta标签viewport这个元素，再次翻看大发和W3c的样式，果然头部都有这个元素的定义。

什么是Viewport

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

最后在自己的header里果断加上meta name=”viewport” content =”width=device-width,initial-scale=1.0,user-scalable=no”达到最终目的，效果见下图，其中content的可选参数有：

width – viewport的宽度

height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

---