viewport元素标记的用法 – 千丝海阁

首页 » Wordpress » viewport元素标记的用法

viewport元素标记的用法

3604 27

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

手机样式viewport说明

一开始我以为手机上的样式需要增大字体,于是去偷瞟了一眼大发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 – 用户是否可以手动缩放
  • 手机样式viewport说明

    文章评分1次,平均分5.0



    上一篇:WordPress插件:最近访客showguests更新至1.02版本
    下一篇:IBM服务器保修查找页面

    本文原始地址:http://www.tiandiyoyo.com/2013/07/how-to-use-viewport/
    本站所有文章,除了特别注明外,均为本站原创,转载请注明出处来自www.tiandiyoyo.com

    您可能还会对以下文章感兴趣:

      没有相关的文章

    评论前先开启评论开关:


    27 Comments

    1. 支持下,祝博客越来越好! 大家一起努力。

    2. tennfy :

      自适应一直没敢弄,怕把原来的主题弄坏了

    3. 学习了,可以玩玩CSS~

    4. 真羡慕可以玩转CSS的博主。

    5. 就是做CMS不方便

    6. 看来我也得弄一个自适应主题了…

    7. 这个我倒没注意,我用的是 WPTouch 插件~~

    8. 神爱 :

      都在玩自适应么…

    9. windows phone 显示会是怎样呢?

    10. 今年一定买一部安卓机看你博客。哈哈

    11. UC 比较烂,也许 Chrome 下的显示效果更好。

    载入分页评论...