移动端网页头部标签模板

  1 <!-- 使用 HTML5 doctype,不区分大小写 -->
  2 <!DOCTYPE html>
  3 <!-- 简体中文 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  4 <html lang="zh-cmn-Hans">
  5
  6     <head>
  7         <!-- 声明文档使用的字符编码 -->
  8         <meta charset=‘utf-8‘>
  9
 10         <!-- 优先使用 IE 最新版本和 Chrome -->
 11         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 12
 13         <!-- 页面描述 -->
 14         <meta name="description" content="不超过150个字符" />
 15
 16         <!-- 页面关键词 -->
 17         <meta name="keywords" content="" />
 18
 19         <!-- 网页作者 -->
 20         <meta name="author" content="name, [email protected]" />
 21
 22         <!-- 搜索引擎抓取 -->
 23         <meta name="robots" content="index,follow" />
 24
 25         <!-- 为移动设备添加 viewport -->
 26         <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1,er-scalable=no">
 27
 28         <!--
 29             `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 tp://bigc.at/ios-webapp-viewport-meta.orz
 30         -->
 31
 32         <!-- iOS 设备 begin -->
 33
 34
 35         <!-- 添加到主屏后的标题(iOS 6 新增) -->
 36         <meta name="apple-mobile-web-app-title" content="标题">
 37
 38         <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
 39         <meta name="apple-mobile-web-app-capable" content="yes" />
 40
 41         <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
 42         <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, p-argument=myURL">
 43
 44         <!-- 设置苹果工具栏颜色 -->
 45         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 46
 47         <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
 48         <meta name="format-detection" content="telphone=no, email=no" />
 49
 50         <!-- 启用360浏览器的极速模式(webkit) -->
 51         <meta name="renderer" content="webkit">
 52
 53         <!-- 避免IE使用兼容模式 -->
 54         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 55
 56         <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
 57         <meta name="HandheldFriendly" content="true">
 58
 59         <!-- 微软的老式浏览器 -->
 60         <meta name="MobileOptimized" content="320">
 61
 62         <!-- uc强制竖屏 -->
 63         <meta name="screen-orientation" content="portrait">
 64
 65         <!-- QQ强制竖屏 -->
 66         <meta name="x5-orientation" content="portrait">
 67
 68         <!-- UC强制全屏 -->
 69         <meta name="full-screen" content="yes">
 70
 71         <!-- QQ强制全屏 -->
 72         <meta name="x5-fullscreen" content="true">
 73
 74         <!-- UC应用模式 -->
 75         <meta name="browsermode" content="application">
 76
 77         <!-- QQ应用模式 -->
 78         <meta name="x5-page-mode" content="app">
 79
 80         <!-- windows phone 点击无高光 -->
 81         <meta name="msapplication-tap-highlight" content="no">
 82
 83         <!-- iOS 图标 begin -->
 84         <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />
 85
 86         <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
 87         <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
 88
 89         <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
 90         <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
 91         <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
 92
 93         <!-- iOS 图标 end -->
 94
 95         <!-- iOS 启动画面 begin -->
 96
 97         <!-- iPad 竖屏 768 x 1004(标准分辨率) -->
 98         <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
 99
100         <!-- iPad 竖屏 1536x2008(Retina) -->
101         <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />
102
103         <!-- iPad 横屏 1024x748(标准分辨率) -->
104         <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />
105
106         <!-- iPad 横屏 2048x1496(Retina) -->
107         <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
108
109         <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
110         <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
111
112         <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
113         <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />
114
115         <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
116         <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
117
118         <!-- iOS 启动画面 end -->
119         <!-- iOS 设备 end -->
120
121
122         <!-- Windows 8 磁贴颜色 -->
123         <meta name="msapplication-TileColor" content="#000" />
124
125         <!-- Windows 8 磁贴图标 -->
126         <meta name="msapplication-TileImage" content="icon.png" />
127
128         <!-- 添加 RSS 订阅 -->
129         <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
130
131         <!-- 添加 favicon icon -->
132         <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
133
134         <title>标题</title>
135     </head>
136
137 </html>
时间: 2024-10-07 14:14:00

移动端网页头部标签模板的相关文章

h5移动端网页头部标签模板

从网上看到一个h5头部标签的模板,拷贝下来,留着以后用,嘿嘿 1 <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> 2 <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> 3 <head> 4 <!-- 声明文档使用的字符编码 --> 5 <meta charset='utf

移动端的头部标签和meta

1 <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> 2 <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --> 3 <head> 4 <!-- 声明文档使用的字符编码 --> 5 <meta charset='utf-8'> 6 <!-- 优先使用 IE 最新版本和

移动端的头部标签和 meta

使用 HTML5 doctype,不区分大小写 <!DOCTYPE html> 更加标准的 lang 属性写法 http://zhi.hu/XyIa <html lang="zh-cmn-Hans"> meta 声明文档使用的字符编码 <meta charset='utf-8'> 优先使用 IE 最新版本和 Chrome <meta http-equiv="X-UA-Compatible" content="IE=

移动端web页面开发常用的头部标签设置

在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> initial-scale属性控制页面最初加载时的缩放等级.maximum-scale.m

【03】HTML?head?头部分的标签说明 和 手机头部标签说明

HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要.了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的.总结介绍常用的 head 中各个标签.元素的意义以及使用场景. DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此

移动前端头部标签(HTML5 head meta)转载

移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用户代理行为的编译.编译的值取content 里的内容.简单来说即可以模拟 HTTP 协议响应头.最常见的大概属于Content-Type了,设置编码类型.如 <meta http-equiv="Content-Type" content="text/html; charse

移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要.这里整理了一份 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 头部标签,可以很有效的增强页面的可用性. HTML基本的头部标签 <!doctype html> <html&

微信端网页中图片的展示方式

一.微信端网页中图片的展示方式 微信端网页中图片有两种展示方式:平铺与图集.平铺的时候文档内的所有图片全部展开,点击图片则放大.图集的时候只展示一张图片,点击图片的时候以翻页的方式展示一组图片.实现原理对于如下一个图片标签,data-gid用于存放组标识,同一组的data-gid相同.data-index用于存放组中图片的展示顺序,不能相同.onclick中根据data-src处理图片展示.对于图集就只显示一张其他的img设置为隐藏,src与第一个图片一样,或者为空,这样可以减少网页的加载量,提

移动前端头部标签(HTML5 head meta)

移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明