H5常用的<meta>总结

<!--为移动端量身打造的一套属性，页面禁止缩放，并且铺满全屏，末尾的minimal-ui是ios7.1为<meta>新增的属性，让网页隐藏顶部地址栏，达到一个全屏显示的效果，不过该属性在ios8版本又给移除了，逗比。--><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<!--禁止页面缓存--><meta http-equiv="expires" content="0"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache">

<!-- safar浏览器全屏显示 --><meta name="apple-mobile-web-app-capable" content="yes"> 

<!-- 浏览器顶部颜色 --><meta name="apple-mobile-web-app-status-bar-style" content="black"> 

<!-- 数字号码不被显示为拨号链接 --><meta name="format-detection" content="telephone=no">
<!-- apple手机的私有属性，将网站添加到主屏幕上时以自定义图片显示，57×57（默认值）的图标对应320×640的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。--> <link rel="apple-touch-icon" sizes="57x57" 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-iphone4.png">    <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png">
<!-- UC默认竖屏，UC强制全屏 --><meta name="full-screen" content="yes"><meta name="browsermode" content="application">
<!-- QQ浏览器强制竖屏 QQ浏览器强制全屏 --><meta name="x5-orientation" content="portrait"><meta name="x5-fullscreen" content="true"><meta name="x5-page-mode" content="app">

时间： 2024-10-11 14:32:10

H5常用的<meta>总结的相关文章

H5常用代码：页面框架

万变不离其宗,道法自然! 虽然H5的小项目一波又一波,但有一个东东基本没什么变化,那就是整个页面的框架结构. 我所常用的H5常用页面框架如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&q

常用HTML meta 标签属性(网站兼容与优化需要)，meta标签

常用HTML meta 标签属性(网站兼容与优化需要),meta标签热度1 评论 143 www.BkJia.Com 网友分享于: 2014-12-29 01:12:00 浏览数11936次常用HTML meta 标签属性(网站兼容与优化需要),meta标签标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务原文地址:http://segmentfault.com

H5常用代码：适配方案3

在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有明显的切割,于是想到既然是保证内容在整屏,那是不是只要保证高度在整屏内就完美了,不管屏幕怎么小整个高度被填在屏幕内,于是就有了这一种适配方案: 代码如下: <!DOCTYPE html> <html> <head> <title>主结构&适配方案3<

H5常用代码：适配方案5

此方案跟方案4是同一原理,也是通过REM实现的,能单独归类出一个方案,是因为它有一定的实用价值,当你遇到追求完美,追求到一像素的UI或者产品时,那此方案将解决你的困境. 方案5主要是用来解决一像素边框来设计的,当你的设计稿中到处是一像素边框,而UI跟产品拿着手机频频跟你说为什么在手机上边框这么粗的时候,而又无法劝服他们妥协的时候,就用这种适配方案吧,亲. 适配方案5代码如下: <!DOCTYPE html> <html> <head> <title>主结构&

H5常用代码：适配方案4

前面有分享了4种适配方案,但始终是通过手动缩放或者视口缩放来实现,用来做一些专题页,或者功能相对简单的项目来说也是完全能应付的,但整体来说感觉还是一种缩放,说不上是真正的适配,言外之意就是即将分享真正的适配喽,呵呵,开个玩笑,其实适配方式千差万种,怎么用全靠自己把握,遇到问题总有解决方法,兵来将挡水来土掩,实在解决不了的就想办法绕过,哈哈. 前面说了那么多废话,开始干正事,适配方案4主要是通过CSS3新增的一个长度单位REM来实现的,约定如下,页面中的1rem就是当前html的字体大小,假如当H

H5常用代码：适配方案2

前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在,在许多场合不尽如人意,会在低版本安卓上出现,不缩放,手动缩放未禁止的问题. 于是出现了第二种适配方案,既然通过视口缩放可以兼容,那为什么不直接用CSS3的缩放来做了,因些有以下适配方案,代码如下: <!DOCTYPE html> <html> <head> <title>适配方案2</title> <meta charset="utf-8"> <met

h5标签基础 meta标签

H5各种头部meta标签的功能

<!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang="en"> 标准的 lang 属性写法 <meta charset='utf-8′> 声明文档使用的字符编码 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome &l

H5各种头部meta标签功能大全

<!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome <meta name=”description”