HTML5中几种meta标签的含义及使用(含移动端)
2017-12-26 19:51
423 查看
1、
4000
<meta name="renderer" content="webkit">
这是指定双核浏览器,默认以何种方式渲染页面。
2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
这是一个文档兼容模式的定义。
Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用以下代码强制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">
提示 IE 用户安装 Google Frame
Google 官方提供了对 Google Frame 插件安装情况的检测,这里直接调用方法即可,如果检测到 IE 并未安装 Google Frame,则弹出对话框提示安装。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
最佳的兼容模式方案,结合考虑以上两种:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
一、什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中,也不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
二、Viewport基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位是缩放为100%的CSS的像素)
2、height : 和width相对应,指定高度
3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例
4、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0
5、minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0
6、user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放
4、<meta name="apple-mobile-web-app-status-bar-style" content="black">
作用:在web app应用下状态条(屏幕顶部条)的颜色
5、<meta name="apple-mobile-web-app-capable" content="yes">
作用:删除默认的苹果工具栏和菜单栏
6、<meta name="format-detection" content="telephone=no">
作用:禁止把数字转化为拨号链接
参考资料:
http://www.th7.cn/web/html-css/201410/62958.shtml
https://zhidao.baidu.com/question/264134661794412085.html
http://blog.sina.com.cn/s/blog_51048da70101cgdq.html
http://blog.csdn.net/cui55/article/details/41822339
4000
<meta name="renderer" content="webkit">
这是指定双核浏览器,默认以何种方式渲染页面。
<meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp">//默认IE兼容模式 <meta name="renderer" content="ie-stand">//默认IE标准模式而 webkit|ie-comp|ie-stand 这种写法,跟font-family的规则类似,按照顺序排他的优先级,不支持则往下,浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。目前支持对其提供支持的浏览器有:360
2、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
这是一个文档兼容模式的定义。
Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用以下代码强制 IE 使用 Chrome Frame 渲染
<meta http-equiv="X-UA-Compatible" content="chrome=1">
提示 IE 用户安装 Google Frame
Google 官方提供了对 Google Frame 插件安装情况的检测,这里直接调用方法即可,如果检测到 IE 并未安装 Google Frame,则弹出对话框提示安装。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
最佳的兼容模式方案,结合考虑以上两种:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
一、什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中,也不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
二、Viewport基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位是缩放为100%的CSS的像素)
2、height : 和width相对应,指定高度
3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例
4、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0
5、minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0
6、user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放
4、<meta name="apple-mobile-web-app-status-bar-style" content="black">
作用:在web app应用下状态条(屏幕顶部条)的颜色
5、<meta name="apple-mobile-web-app-capable" content="yes">
作用:删除默认的苹果工具栏和菜单栏
6、<meta name="format-detection" content="telephone=no">
作用:禁止把数字转化为拨号链接
参考资料:
http://www.th7.cn/web/html-css/201410/62958.shtml
https://zhidao.baidu.com/question/264134661794412085.html
http://blog.sina.com.cn/s/blog_51048da70101cgdq.html
http://blog.csdn.net/cui55/article/details/41822339
相关文章推荐
- 使用Egret开发的HTML5项目,使用本地电脑作为服务器进行移动端调试流程
- 使用javascript,HTML5,CSS3打造移动端音乐播放器
- HTML5结合jquery-mobile移动端的使用
- 移动端使用meta标签解决input获取焦点放大页面
- 移动端开发meta标签的使用
- html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
- 使用HTML5 FILE API上传图片移动端缩略图兼容问题
- 使用 HTML5 input 类型提升移动端输入体验(键盘)
- 使用 HTML5 input 类型提升移动端输入体验(键盘)
- ABAP SY-SUBRC 使用过程中返回值的几种含义
- 使用 HTML5 input 类型提升移动端输入体验(键盘)
- 移动端 html5 meta标签的设置含义
- html5 meta(移动端)介绍及使用
- 使用 HTML5 input 类型提升移动端输入体验
- html5 meta(移动端)介绍及使用
- 移动端meta标签的使用和说明
- HTML5的<meta> 元素移动端的使用技巧
- html5移动端适配使用流体布局经常遇到的坑
- html5 meta(移动端)介绍及使用
- 使用 HTML5 input 类型提升移动端输入体验(转翻译)