HTML5移动开发中的meta与link

HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验

viewport网页缩放

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

UTF-8编码

<meta charset="utf-8" />

SEO搜索引擎相关设置

<!-- 作者 -->

<meta contect="..." />

<!-- 关键词 -->

<meta content="..." />

<!-- 描述 -->

<meta content="..." />

<!-- 抓取 -->

<meta content="..." />

iOS系统相关设置

<!-- 禁用自动识别电话号码 -->

<meta content="telephone=no" />

<!-- 禁用自动识别电子邮件 -->

<meta content="email=no" />

Safari浏览器相关设置

<!-- 强制全屏 -->

<meta content="yes" />

<!-- 设置状态栏颜色 -->

<meta content="black" />

<!-- 设置添加至主屏标题 -->

<meta content="..." />

UC浏览器相关设置

<!-- 强制竖屏 -->

<meta content="portrait" />

<!-- 强制全屏 -->

<meta content="yes" />

<!-- 应用模式 -->

<meta content="application" />

QQ浏览器相关设置

<!-- 强制竖屏 -->

<meta content="portrait" />

<!-- 强制全屏 -->

<meta content="true" />

<!-- 应用模式 -->

<meta content="app" />

360浏览器相关设置

<!-- 启用极速模式 -->

<meta content="webkit" />

WP手机相关设置

<!-- 禁用点击高光效果 -->

<meta content="no" />

Weibo社交标签相关设置

<!-- 展示标题 -->

<meta property="og:title" content="..." />

<!-- 展示描述 -->

<meta property="og:description" content="..." />

<!-- 展示类型 -->

<meta property="og:type" content="..." />

<!-- 展示图片 -->

<meta property="og:image" content="..." />

<!-- 展示链接 -->

<meta property="og:url" content="..." />

link

让你的WebAPP看上去更像NativeAPP,带来不一样的用户体验

RSS订阅

<link type="application/rss+xml" href="https://www.linuxidc.com/rss.xml" title="RSS" />

主屏图标相关设置

<!-- Favicons -->

<link type="image/ico" href="https://www.linuxidc.com/Linux/images/favicon.ico" />

<!-- Android -->

<link sizes="196x196" href="https://www.linuxidc.com/Linux/images/icon-196x196.png" />

<!-- iPhone、iTouch -->

<link href="https://www.linuxidc.com/Linux/images/icon-57x57.png" />

<!-- Retina iPhone、Retina iTouch -->

<link sizes="114x114" href="https://www.linuxidc.com/Linux/images/icon-114x114.png" />

<!-- Retina iPad -->

<link sizes="144x144" href="https://www.linuxidc.com/Linux/images/icon-144x144.png" />

iOS启动动画相关设置

<!-- iPhone、iPod Touch竖屏 -->

<link href="https://www.linuxidc.com/Linux/images/icon-320x480.png" />

<!-- Retina iPhone、Retina iPod Touch竖屏 -->

<link sizes="640x960" href="https://www.linuxidc.com/Linux/images/icon-640x960.png" />

<!-- Retina iPhone 5、Retina iPod Touch 5竖屏 -->

<link sizes="640x1136" href="https://www.linuxidc.com/Linux/images/icon-640x1136.png" />

<!-- iPad竖屏 -->

<link sizes="768x1004" href="https://www.linuxidc.com/Linux/images/icon-768x1004.png" />

<!-- iPad横屏 -->

<link sizes="1024x748" href="https://www.linuxidc.com/Linux/images/icon-1024x748.png" />

<!-- Retina iPad竖屏 -->

<link sizes="1536x2008" href="https://www.linuxidc.com/Linux/images/icon-1536x2008.png" />

<!-- Retina iPad横屏 -->

<link sizes="2048x1496" href="https://www.linuxidc.com/Linux/images/icon-2048x1496.png" />

关于meta与link的设置项其实还有不少,由于太过冷门,就不一一列举了

HTML5新增的标签和废除的标签 

40 个重要的 HTML5 面试题及答案   

HTML5与CSS3基础教程(第8版)中文高清版 PDF 

HTML5 地理位置定位(HTML5 Geolocation)原理及应用  

HTML5移动开发即学即用(双色) PDF+源码  

HTML5入门学习笔记  

HTML5移动Web开发笔记  

HTML5 开发中的本地存储的安全风险  

《HTML5与CSS3权威指南》及相配套源码  

关于 HTML5 令人激动的 10 项预测  

HTML5与CSS3实战指南 PDF  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/8b19389f57d7d68d8130b9b5481e008a.html