meta

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

viewport网页缩放

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

UTF-8编码

1
<meta charset="utf-8" />

SEO搜索引擎相关设置

1
2
3
4
5
6
7
8
<!-- 作者 -->
<meta name="author" contect="..." />
<!-- 关键词 -->
<meta name="keywords" content="..." />
<!-- 描述 -->
<meta name="description" content="..." />
<!-- 抓取 -->
<meta name="robots" content="..." />

iOS系统相关设置

1
2
3
4
<!-- 禁用自动识别电话号码 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁用自动识别电子邮件 -->
<meta name="format-detection" content="email=no" />

Safari浏览器相关设置

1
2
3
4
5
6
<!-- 强制全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置状态栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 设置添加至主屏标题 -->
<meta name="apple-mobile-web-app-title" content="..." />

UC浏览器相关设置

1
2
3
4
5
6
<!-- 强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- 强制全屏 -->
<meta name="full-screen" content="yes" />
<!-- 应用模式 -->
<meta name="browsermode" content="application" />

QQ浏览器相关设置

1
2
3
4
5
6
<!-- 强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- 强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- 应用模式 -->
<meta name="x5-page-mode" content="app" />

360浏览器相关设置

1
2
<!-- 启用极速模式 -->
<meta name="renderer" content="webkit" />

WP手机相关设置

1
2
<!-- 禁用点击高光效果 -->
<meta name="msapplication-tap-highlight" content="no" />

Weibo社交标签相关设置

1
2
3
4
5
6
7
8
9
10
<!-- 展示标题 -->
<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订阅

1
<link rel="alternate" type="application/rss+xml" href="rss.xml" title="RSS" />

主屏图标相关设置

1
2
3
4
5
6
7
8
9
10
<!-- Favicons -->
<link rel="shortcut icon" type="image/ico" href="../images/favicon.ico" />
<!-- Android -->
<link rel="icon" sizes="196x196" href="../images/icon-196x196.png" />
<!-- iPhone、iTouch -->
<link rel="apple-touch-icon-precomposed" href="../images/icon-57x57.png" />
<!-- Retina iPhone、Retina iTouch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../images/icon-114x114.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../images/icon-144x144.png" />

iOS启动动画相关设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- iPhone、iPod Touch竖屏 -->
<link rel="apple-touch-startup-image" href="../images/icon-320x480.png" />
<!-- Retina iPhone、Retina iPod Touch竖屏 -->
<link rel="apple-touch-startup-image" sizes="640x960" href="../images/icon-640x960.png" />
<!-- Retina iPhone 5、Retina iPod Touch 5竖屏 -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="../images/icon-640x1136.png" />
<!-- iPad竖屏 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="../images/icon-768x1004.png" />
<!-- iPad横屏 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="../images/icon-1024x748.png" />
<!-- Retina iPad竖屏 -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="../images/icon-1536x2008.png" />
<!-- Retina iPad横屏 -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="../images/icon-2048x1496.png" />
关于meta与link的设置项其实还有不少,由于太过冷门,就不一一列举了

HTML5移动开发中的meta与link的更多相关文章

  1. HTML5移动开发中的input输入框类型

    HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...

  2. 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD

    在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...

  3. 借助AMD来解决HTML5游戏开发中的痛点

    借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...

  4. 浅析网站开发中的 meta 标签的作用

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. 前端开发中的 meta 整理

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  6. HTML5移动开发中的input输入框类型 (转)

    公司的项目开发过程中的,的用户体验忽略了.登录tel就用tel属性.新来的小伙伴提醒的.谢谢他 数字类型number 定义input类型为type="number"时,iOS显示数 ...

  7. Cocos2d-x游戏开发中的消息机制:CCNotificationCenter的使用

    在HTML5游戏开发中,js可以使用Event对象的addEventListener(添加事件监听).dispatchEvent(触发事件)实现监听机制,如果在coocos2d-x中,去实现这种机制该 ...

  8. 自动化的基于TypeScript的HTML5游戏开发

    自动化的开发流程 在HTML5游戏开发或者说在Web客户端开发中,对项目代码进行修改之后,一般来说,需要手动刷新浏览器来查看代码修改后运行结果.这种手动的方式费时费力,降低了开发效率.另外,如果我们使 ...

  9. 小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问速度

    在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...

随机推荐

  1. 导入导出Excel

    最近需要频繁的使用导入导出,各么,又不想使用ms的PIA,在4.0以下,存在版本兼容的问题. 于是网上查找了很久,找到两款开源的excel组件. 1.CSharpJExcel,这是JExcel的.ne ...

  2. (4)html表格

    本节解说 :html的表格 表格: *<table></table> 标签定义 HTML 表格. *简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 t ...

  3. jquery动态创建form并提交到.ashx文件处理

        有时候在写web 应用的时候,需要临时动态构造一个form 并提交,form 里面的参数以及action,以及是post请求还是get请求,甚至form 的样式都是可以指定的,用原生的java ...

  4. linux C(hello world) 解方程

  5. 一步步学Mybatis-告别繁琐的配置之Mybatis配置文件生成工具 (7)

    今年是2013年的杀青之日,前几天由于比较忙,没有及时更新本篇的最后一篇东西,前六篇中我们主要都是采用手动配置相关的Mybatis映射文件与相应的接口类与实体类.当然如果在真正的使用过程中,由于业务的 ...

  6. AJAX responseText vs responseXML

    AJAX------>本质 Request/Response(Server)模式 response的形式 responseText--------->获得字符串形式的响应数据. ----- ...

  7. [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

    In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...

  8. oracle db打one-off-patch 一例

    由于EBS form界面有一个报错,是一个小bug,以下打一个小patch修补一下. [以下的过程没有停库] 解压p8496830_111070_Linux-x86-64.zip cd 8496830 ...

  9. EJB究竟是什么,真的那么神奇吗??

    1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业级开发",那么 ...

  10. RAID设备

    RAID(Redundant Array of Independent Disk),独立冗余磁盘阵列(通常简称磁盘阵列).磁盘阵列的实质是将多个磁盘通过RAID控制器组合在一起,形成一个新的磁盘.这个 ...