WebApp里的Meta标签大全

时间:2019-08-01 10:58:58 来源:

什么事webapp?webapp就是用HTML5编写的移动Web应用,一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
优势在于一套代码到处运行,开发成本低,工期短,只需要后台和前端工程师就能完成全部工作。劣势是某些底层功能缺失,运行速度不如原生的App,用户体验不好,必须做好各种极端条件下的提示措施。下面小思带您了解下webapp中常见的meta标签。
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后我们页面将如此呈现了
meta标签里的name属性
name 属性
(1)、<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;
(2)、<meta name="keywords" contect="">向搜索引擎说明你的网页的关键词;
(3)、<meta name="Description" contect="">告诉搜索引擎你的站点的主要内容;
(4)、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者;
(5)、<meta name="Robots" contect="all | none | index | noindex | follow | nofollow">
其中的属性说明如下:
设定为all:文件将被检索,且页面上的链接可以被查询;
设定为none:文件将不被检索,且页面上的链接不可以被查询;
设定为index:文件将被检索;
设定为follow:页面上的链接可以被查询;
设定为noindex:文件将不被检索,但页面上的链接可以被查询;
设定为nofollow:文件将不被检索,页面上的链接可以被查询
webapp里主要的mate用途
<meta name="apple-touch-fullscreen" content="yes">  添加到主屏幕后,全屏显示。
<meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。
<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
说明: 这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码
<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界面创建应用程序样式的图标。

推荐阅读

[2019-08-01]WebApp里的Meta标签大全
接通金牌顾问

+云联互动服务:

+网站/微信服务:

网站友链交换 :


八亿彩票下载安装 博悦彩票平台|下载安装 97彩票app 幸运彩票app下载 038彩票安卓app_038彩票官方版线路 华夏彩票app 幸运彩票app下载 105彩票app 1分钟赛车网站 旺彩app下载