wordpress CMS主题 微信
Home > wordpress CMS主题制作 > wordpress响应式主题之移动端头部meta标签

wordpress响应式主题之移动端头部meta标签

高时银博客 wordpress CMS主题制作 点击: 644 次 0 1
  • 标签:
  • 在上一章中,我们讲述了wordpress网站做响应式布局的几个方案文中只是介绍了响应式布局中的CSS样式部分怎么书写。而响应式布局主要方向是针对手机、平板等移动端的,所以还需要一些非常重要的网页头部标签,如果没有这些标签,则在手机等移动端页面则不能正常显示。下面,就一起来看看这些移动端的标签。

    1、<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    网页手机wap2.0网页的head里加入上面这条元标签,在手机浏览器中页面将以原始大小显示,并不允许缩放。标签中各元素的意思如下:

    width: viewport的宽度,device-width表示设备宽度;
    height:viewport的高度;
    initial-scale:初始的缩放比例
    minimum-scale:允许用户缩放到的最小比例
    maximum-scale:允许用户缩放到的最大比例
    user-scalable:用户是否可以手动缩放

    2、<meta name="format-detection" content="telephone=yes"/>

    这句代码的意思是:当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。yes表示显示超链接。no表示不显示。

    3、<meta name="apple-mobile-web-app-capable" content="yes" />

    说明:网站开启对web app程序的支持。就是说该 meta 是专门定义 web 应用的。

    4、<meta name="apple-mobile-web-app-status-bar-style" content="black" />

    在web app应用下状态条(屏幕顶部条)的颜色;默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
    注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

    以上4个meta标签只有第一个使用的是最多的,因为它主要是针对响应式布局的,没有这句代码,就算你的CSS样式做好了响应式设置,在移动端也不会理想显示。所以,在开发wordpress响应式主题时,一定要在网页的head头部加上这一句meta代码。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201705185287.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论