SEO优化干货：meta属性详解( 四 ) _meta属性

文章插图

好了，我们就可以按全屏来布局我们的页面了，不用再担心页面显示的很小了！

2、Meta 之 format-detection
<meta name=”format-detection” content=”telephone=no”/>
你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：
telephone=no 就禁止了把数字转化为拨号链接！
telephone=yes 就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！

3、Meta 之
apple-mobile-web-app-capable
<meta name=”apple-mobile-web-app-capable”content=”yes” />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
加了该meta的情况：

文章插图

4、Meta 之
apple-mobile-web-app-status-bar-style
<meta name=”apple-mobile-web-app-status-bar-style”content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style”content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style”content=”black-translucent” />
作用是控制状态栏显示样式
status-bar-style:black

文章插图

status-bar-style:black-translucent

文章插图

WebApp是一种新出现的基于WEB形式的类应用程序，运行在高端的移动终端设备上，其应用范围会越来越广。
开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。
Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、php、ASP 。
当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用 HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–webapp的布局方式和技术。
在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发 Wap 2.0 。

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
2 <meta content=”yes” name=”apple-mobile-web-app-capable” />
3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
4 <meta content=”telephone=no,email=no” name=”format-detection” />
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
user-scalable定义是否可缩放（0为不缩放），使页面固定设备上面的大小。
（注意：据说HTC G7自身系统浏览器不支持这一条规则，能对页面进行放大，一旦放大导致页面布局错乱，解决方法：定义页面的最小宽度 min-width，body{min-width: 300px;}）
IOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏。<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
第二个meta标签是ios设备(不只iphone)中的safari私有meta标签，它表示：允许全屏模式浏览，开启对Web Aapp程序的支持。；
第三个meta标签也是ios系统的私有标签，它指定在web app状态下，ios设备中顶端的状态条的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。