HTML5移动开发中的meta与link

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的设置项其实还有不少，由于太过冷门，就不一一列举了
时间： 2024-10-02 21:59:42

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

HTML5游戏开发中基础的Tag讲解

一般在HTML5游戏开发中,基础的Tag都用在标题,段落以及分行上,下面就来讲解下几种最常用的Tag.当然最好用的HTML5学习方式就是跟随示例,今天我们的HTML5游戏开发教程也从实例开始. 首先来看一下标题中的Tag应用.在HTML5游戏开发中,我们用从h1至h6的几个Tag来定义文章的标题,每个正文中的标题都是自成一段的.例如这样: <html>  <head></head>  <body>   <h1>This is a heading&

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

HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型number 定义input类型为type="number"时,iOS显示数字.标点及符号键盘,Android显示拨号键盘.代码如下所示 1 <input type="number" id="number" name="number&quo

玩转HTML5+跨平台开发[7] HTML meta标签的其它类型

meta其它类型 Keywords类型 作用: 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你: 格式: <meta name="keywords" content="IT前言技术.iOS技术.HTML5技术.Android技术" /> Descriiption类型 作用: 告诉搜索引擎当前网页的主要内容, 在SEO中非常重要, 当别人在搜索引擎中搜索到你的网站时会自动作为对你网站的描述信息展示给用户, 能

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(51)--jquerymobile中改善页面访问速度 在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mob

HTML5移动开发之路（44）——JqueryMobile中的按钮

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(44)--JqueryMobile中的按钮 一.链接按钮 [html] view plain copy print? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <link href=

HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(41)--jqMobi中Side Menu实现(类似人人网) 记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建一个html文件,引入jqMobi的框架,如下: [html] view plain copy print? <!DOCTYPE html> &l

小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响. 在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作.预取的详细过程如下: 注意:使用预取功能时,不建议给所有链接都添加data-pr

小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"> <meta name="viewport"