H5页面通用头部设置
时间:2020-01-14
本文章向大家介绍H5页面通用头部设置,主要包括H5页面通用头部设置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
见到很多人写H5页面都不设置头部,不忍直视,于是整理一篇文章,不定期更新,为了让自己显得专业一点,也为了方便自己复制粘贴
一般来说必须设置项
<!-- 页面编码 -->
<meta charset="UTF-8" />
<!--
http-equiv常见还有其它如下等(合理使用可增加 SEO 收录)。
Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过期时间
last-modified : 页面最后生成时间
expires : 设置 cache 过期时间
cache-control : 设置文档的缓存机制
...
-->
<!-- 缓存与过期时间设置 -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="Expires" content="0">
<!-- dns预加载(SEO优化) -->
<link rel="dns-prefetch" href="//css.cdn.com" />
<link rel="dns-prefetch" href="//js.cdn.com" />
<!-- 宽度默认100%全屏宽度,禁止手指缩放,初始缩放值1.0 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- ====必须设置 End==== -->
根据需要可配置项
<!-- ====根据使用配置Start==== -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!-- 不自动识别手机号,邮箱地址 -->
<meta name="format-detection" content="telephone=no,email=no">
<!-- 页面关键字优化 -->
<meta name="keywords" content="H5页面通用配置">
<!-- 页面标签icon配置 -->
<link rel="icon" href="//icon.img.com/favicon.ico" type="image/x-icon">
<!-- 一些国内webkit内核浏览器默认使用极速模式 -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- apple-touch-icon:在webapp下,指定放置主屏幕上 icon 文件路径 -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- apple-touch-startup-image:在 webapp 下,设置启动时候的界面 -->
<link rel="apple-touch-startup-image" href="/startup.png" />
<!-- ====根据使用配置End==== -->
一些接近过时的参考项
<!--禁用IE8兼容模式(IE8兼容模式使用的是IE7的渲染方式)-->
<meta http-equiv="X-UA-Compatible" content="IE=8" /> <!--//设置内核为IE8,这里改变时,下面会自动改变-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><!--//设置渲染文档模式为IE8-->
<!--使用IE8兼容模式-->
<meta http-equiv="X-UA-Compatible" content="IE=7" /><!--//设置内核为IE7,这里改变时,下面会自动改变-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" ><!--//设置渲染文档模式为IE7-->
<!-- 从左向右依次查询使用内核,左侧优先级高 -->
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9; IE=8;" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11;IE=EmulateIE10;IE=EmulateIE9;IE=EmulateIE8" />
<!--chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
完整代码:
地址
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12193125.html
- uva----(100)The 3n + 1 problem
- 程序员你为什么这么累[续]:编码习惯之接口定义
- Python-贝叶斯实战垃圾邮件过滤(大量数据)
- hdu------(3549)Flow Problem(最大流(水体))
- go语言实现http服务端与客户端
- hdu-----(1532)Drainage Ditches(最大流问题)
- LNMP无法删除.user.ini文件的解决方法
- HDU-----(4858)项目管理(模拟)
- hdu-----(4857)逃生(拓扑排序)
- HDU-----(1083)Courses(最大匹配)
- HDU----(3294)Girls' research(manacher)
- map
- hdu----(3068)最长回文(manacher)
- hdu---(1280)前m大的数(计数排序)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Asp.Net Core 3.1 获取不到Post、Put请求的内容 System.NotSupportedException Specified method is not supported
- OpenGL ES for Android 播放视频
- Centos 7 在线安装 离线安装 最新 Docker-compose 的正确姿势 实践笔记
- OpenGL ES for Android 视频缩放、旋转、平移
- OpenGL ES for Android 相机预览
- OpenGL ES for Android 相机预览适配不同分辨率的手机
- Flutter Widgets 之 Container
- Flutter Widgets 之 Row和Column
- Flutter Widgets 之 SafeArea
- Flutter Widgets 之 Wrap
- Flutter Widgets 之 Expanded和Flexible
- 可能是Asp.net Core On host、 docker、kubernetes(K8s) 配置读取的最佳实践
- Flutter Widgets 之 AnimatedContainer
- Flutter Widgets 之 Opacity 和AnimatedOpacity
- 聊聊常见的服务(接口)认证授权