移动端网页常用meta
今天在对前公司的某直播室前端进行改版时,整理了一下平时移动端页面开发时,最常用的meta。如下:
<!--定义页面制作者,可以留姓名,也可以留联系方式--> <meta name="author" content="chenjunfeng"/> <!--向搜索引擎说明你的网页的关键词--> <meta name="keywords" contect=""/> <!--告诉搜索引擎你的站点的主要内容--> <meta name="description" contect="" /> <!--下面两个meta的作用都是:添加到主屏幕后,全屏显示--> <!--两者的区别,google stackflow中的答案是--> <!--They behave the same way, at least for now. --> <!--app-mobile-web-app-capable is the only version mentioned in Safari documentation, so I would stick with it. --> <!--It looks to me as if apple-touch-fullscreen was used in early demos/previews, so it was left working later when the SDK got actually released, but the preferred version is the one documented.--> <meta name="apple-touch-fullscreen" content="yes"/> <!--可能会被除去--> <meta name="apple-mobile-web-app-capable" content="yes"/> <!--页面内容中的电话号码是否以超链接形式显示,telephone=no表示否--> <meta name="format-detection" content="telephone=no"/> <!--width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )--> <!--height: viewport 的高度 (范围从 223 到 10,000 )--> <!--initial-scale: 初始的缩放比例 (范围从>0到 10 )--> <!--minimum-scale: 允许用户缩放到的最小比例--> <!--maximum-scale: 允许用户缩放到的最大比例--> <!--user-scalable: 用户是否可以手动缩放--> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> <!--这个link就是设置web app的放置主屏幕上icon文件路径。--> <!--图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)--> <!--后缀precomposed是自定义高光及圆角图标--> <!--虽然官方都用的png图片做说明,但实际测试jpg格式也可用(不推荐)--> <!--图片无需做圆角和高光效果,同Native App一样,系统会自动为图标添加圆角及高光。--> <!--如果不想系统对图标添加效果,可以用apple-touch-icon-precomposed代替apple-touch-icon,这时我们提供的图标就要自己做圆角和高亮效果了。--> <!--参考:http://blog.csdn.net/freshlover/article/details/9310437--> <link rel="apple-touch-icon-precomposed" href="icon.png" /> <!-- Standard iPhone --> <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" /> <!-- Retina iPhone --> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" /> <!-- Standard iPad --> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" /> <!-- Retina iPad --> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" /> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!---------------------少用的----------------------> <!--告诉搜索引擎爬取完隔多长时间爬一次--> <meta name="revisit-after" content="1 days">
相关链接:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。