WEBAPP开发关于html头部引用（meta，link）-职坐标

WEBAPP开发关于html头部引用（meta，link）

白羽 2019-03-05 来源：网络阅读 1455 评论 0

摘要：本文将带你了解WEBAPP开发关于html头部引用（meta，link），希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发关于html头部引用（meta，link），希望本文对大家学WEBAPP有所帮助。

WEBAPP开发关于html头部引用（meta，link）

/*这一段头部表示如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。*/
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

/*这一段头部表示 IE浏览器用IE7模拟，IE9还是用IE9来渲染*/
<meta content="IE=EmulateIE7, IE=9" http-equiv="X-UA-Compatible">

/*头部的申明利于SEO*/
<meta charset="utf-8">/*一般性简写成这样的也就够了*/
<meta content="Apple Inc." name="Author">/*这个是网站的所属标签提示*/

/*可以阻止用户触摸放大屏幕*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">/*一般性这种写法就可以了*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">/*这种写法更严谨，只是没有必要，效果和上面的一样*/
/*width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放*/

/*这个是html中写ico的方法，另外js和php后台都可以控制替换最初静态的html中的ico*/
/*其中<link rel="shortcut icon" href="favicon.ico">这段代码最关键*/
<link rel="shortcut icon" href="//www.luxiw.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="//www.luxiw.com/favicon.ico" type="image/vnd.microsoft.icon">
/*底下的代码是在收藏夹中也可以显示图标*/
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico">

第一：针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓（虽然黑莓在国内的市场占有率很低，但是多家一行有好处）
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

第二：微软的老式浏览器（这个可以不用，比较基本没有了。）
<meta name="MobileOptimized" content="320"/>

第三：UC浏览器(市场占有很强势的一个moblie浏览器)
强制竖屏：
<meta name="screen-orientation" content="portrait"/>
强制全屏：
<meta name="full-screen" content="yes"/>
应用模式：
<meta name="browsermode" content="application"/>

QQ浏览器（腾讯的就不多说了，用户群体在那）
强制竖屏：
<meta name="x5-orientation" content="portrait"/>
强制全屏：
<meta name="x5-fullscreen" content="true"/>
应用模式：
<meta name="x5-page-mode" content="app"/>

第四：windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no"/>

第六：忽略页面中的数字识别为电话号码还有一个email识别
<meta name="format-detection" content="telephone=no,email=no"/>

这个里面可以设置address=no;email=no;telephone=no用分号隔开即可。

第九：隐藏浏览器导航栏
<meta name="apple-mobile-web-app-capable" content="yes" />

如何关闭iOS中键盘自动大写

我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的
移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize="off"来关闭键盘默认首字母大写

缓存控制
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=300"/>
<meta http-equiv="Cache-Control" content="max-age=0"/>

HTTP刷新
WAP 浏览器不支持用 <meta/> 标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种情况下,
解决方案是在服务器端的 HTTP 响应中设置 HTTP 头
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="refresh" content="15"/>

/*关于强制全屏 IOS*/
<meta name="apple-touch-fullscreen" content="yes"/>
/*关于标签的问题，每个浏览器可能自己有一套设定的方式，这个就是IOS的document链接地址*/
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

关于设置IOS的桌面添加主屏的功能（可以让web页面更像一个native app）
<link rel="apple-touch-icon-precomposed" href="这里是你的图片地址" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

其中，apple-touch-icon-precomposed添加到桌面时有圆角/高光修饰，apple-touch-icon只处理圆角,没有高光修饰

<link rel=”dns-prefetch” href=”//a0.twimg.com”/>

dns-prefetch是HTML5的新增内容，主要用于前端优化，减少DNS的请求，预解析DNS。通过以上的例子可以看到，它将域名缓存后，当用户点击其它页面地址后自动的获取。从而控制浏览器来解析域名。

另外，<meta http-equiv="x-dns-prefetch-control" content="on"> 可以设置当前页面是否要进行DNS解析。content="on"代表的是解析/content="off"代表的是不解析。默认解析。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

职坐标官网 steam移动应用验证手机app赚钱软件

本文由 @白羽发布于职坐标。未经许可，禁止转载。