首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动端 webapp meta小结

移动端 webapp meta小结

作者头像
星宇大前端
发布2019-01-15 14:55:07
1.2K0
发布2019-01-15 14:55:07
举报
文章被收录于专栏:大宇笔记大宇笔记

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!

先说下项目中如下meta:

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" /> <meta name="format-detection" content="telephone=no"/> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

1、viewport

viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320。

因此我们必须改变viewport,我们就有如下几种属性值可以设置:

width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 ) 

height: viewport 的高度 (范围从 223 到 10,000 )

initial-scale: 初始的缩放比例 (范围从>0到 10 ) 

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

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

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

对于这些属性,我们可以设置其中的一个或者多个,并不需要你同时都设置,iPhone 会根据你设置的属性自动推算其他属性值 ,而非直接采用默认值。

如果你把initial-scale=1 ,那么 width 和 height在竖屏时自动为320*356 (不是320*480 因为地址栏等都占据空间 ),横屏时自动为 480*208。类似地 ,如果你仅仅设置了 width ,就会自动推算出initial-scale 以及height。例如你设置了 width=320 ,竖屏时 initial-scale 就是 1 ,横屏时则变成 1.5 了

那么到底这些设置如何让 Safari 知道 ?其实很简单 ,就一个 meta ,形如 :

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> 设置了meat后我们页面将如此呈现了

2、<meta http-equiv="X-UA-Compatible" content="IE=edge" />

X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。 

在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级: 

meta tag > http header

meta tag  > http header

常用的例子:

<meta http-equiv="X-UA-Compatible" content="IE=7">  
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

<meta http-equiv = "X-UA-Compatible" content = "IE=7" >    #以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。   <meta http-equiv = "X-UA-Compatible" content = "IE=8" >    #以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。   <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >    #以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。   <meta http-equiv = "X-UA-Compatible" content = "IE=7,IE=9" >    <meta http-equiv = "X-UA-Compatible" content = "IE=7,9" >    <meta http-equiv = "X-UA-Compatible" content = "IE=Edge,chrome=1" > # 以上代码IE  = edge告诉IE使用最新的引擎渲染网页,chrome  = 1则可以激活Chrome Frame  .

3、 <meta name="apple-mobile-web-app-capable" content="yes" />       <meta name="apple-touch-fullscreen" content="yes" />       <meta name="apple-mobile-web-app-status-bar-style" content="black" />

apple-mobile-web-app-capable :这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

apple-touch-fullscreen:添加到主屏幕后,全屏显示。

“apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式

(默认样)

4、<meta name="format-detection" content="telephone=no"/>

format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置:

meta name="format-detection" content="telephone=no"

meta name="format-detection" content="email=no"

meta name="format-detection" content="adress=no" 

也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"

下面具体说下每个设置的作用:

一、telephone

你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

telephone=no就禁止了把数字转化为拨号链接! telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

二、email

告诉设备不识别邮箱,点击之后不自动发送

email=no禁止作为邮箱地址! email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

三、adress

adress=no禁止跳转至地图! adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

5、<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /> <link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年05月15日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档