移动端<meta>属性配置讲解(整理)
meta标签,是head区的辅助标签
HTML代码如下:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
1.<meta charset="utf-8">
charset,字符集的意思,utf-8为最广泛的编码,致力于把全球额语言纳入统一的编码,广泛应用于网页编码;GB2312是简体中文编码。当网页中出现中文、韩文、日文的时候网页将可能出现乱码,不能正确地被正确编码。
2.<meta name="viewport" content="width=device-width,initial-scale=1.0,mininum-scale=1.0,user-scalable=no">
移动设备上的viewport就是设备的屏幕能用来显示网页的那部分区域,移动设备并不像电脑设备那样一个像素对应一个物理像素,css中的像素只是一个抽象的单位,设备上的一个css像素相当于多少个物理像素,也因设备的不同而不同。
width=device-width
在meta元素中设置viewport的width等于设备的屏幕的分辨率宽度device-width,
initial-scale=1.0
initial-scale:为初始缩放比例,
mininum-scale:允许用户的最小缩放比例
maximum-scale:允许用户的最大缩放比例
user-scalable:是否允许用户手动缩放
在移动端中为了较好地显示一致一般不允许用户缩放,初始缩放为1.
具体说明可以看:http://www.cnblogs.com/2050/p/3877280.html
3.<meta http-equiv="X-UA-Compatible" content="IE=edg,chrome=1">
实际上X-UA-Compatible是针对IE8推出的一个属性,当时IE8退出,造成了很多的重构问题,所以用这个标签来强制IE8采用低版本模式渲染
IE=edg,chrome=1表示如果IE装有google chrome frame,那么用安装的组件,如果没有就以IE的最高版本来显示
4.<meta name="format-detection" content="telephone-no">
format-detection的意思是格式检测,设备会自动将一串数字加链接样式,当点击这个数字会自动拨号,
telephone=no就是告诉移动端设备不需要做这个格式检测,
还有就是email=no,adress=no,邮件和地址不需要识别,因为有可能点击就启动发邮箱和地图的默认软件跳转。
<meta name="format-detection" content="telephone=no,email=no,adress=no">
html代码如下:
<meta name ="keywords" CONTENT="关键字,keyword">
<meta name ="description" CONTENT="about,descriotion">
<meta name ="robots" CONTENT="all,none,index,noindex,follow,nofollow">
<meta name ="author" CONTENT="author,name.@XX.com">
<meta http-equiv="Pragma" CONTENT="no-cache">
禁止浏览器从本地机的缓存中调阅页面内容,在测试时可用,避免改代码刷新不成功,还是原来的缓存。
移动端<meta>属性配置讲解(整理)的更多相关文章
- 移动端meta标签整理-备
分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...
- 移动端UC /QQ 浏览器的部分私有Meta 属性
<meta name="format-detection" content ="telephone=no"/> 格式检测 禁止识别我们页面中的数 ...
- HTML meta标签总结,HTML5 head meta属性整理
原文链接:http://caibaojian.com/mobile-meta.html <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -- ...
- head meta属性整理笔记
最近做这个站点http://zhimo.yuanzhumuban.cc/,百度一直出现转码问题,很头疼,通过一周时间研究meta属性,达到了代码优化的效果,在此做一些笔记. <head> ...
- ExtJs控件属性配置详细
序言: 1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项: ...
- 移动端meta标签设置
移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...
- 移动端meta 解释
移动端meta 解释 <meta name="viewport" content="width=device-width, initial-scale=1.0, u ...
- Spring 属性配置
此文已由作者尧飘海授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 随着Spring的不断发展与完善,早期它的功能可能只看做是IOC(反转控制)的容器,或者其最大的亮点为DI( ...
- hibernate属性配置
数据库中一个字段的默认值设为0,当用hibernate插入数据时,没有对该字段进行操作,结果该字段居然不是0,而是空.后来google了一下,发现应该在.hbm.xml文件中添加一些参数定义(示例中的 ...
随机推荐
- 二硫化铼(ReS2)的电子输运特性及逻辑器件研究进展
南京大学物理学院.固体微结构物理国家重点实验室.微结构科学与技术协同创新中心的缪峰教授课题组和王伯根教授课题组在新型二维材料二硫化铼(ReS2)的电子输运特性及逻辑器件研究领域取得重要进展,相关论文于 ...
- C语言结合汇编开发系统内核
- Ubuntu18.04安装Virtualenv虚拟环境
在Ubuntu18.04安装Virtualenv虚拟环境 [实验环境]: 在这台电脑上已经安装了python3 [安装参考] 1.查看是否已安装virtualenv virtualenv --vers ...
- BI失败的原因
最最重要的, 要有个清晰的目标和范围. 有些客户, 完全脑袋一热开始上BI, 连根本上要BI来解决什么问题都不知道.作为企业的CIO, 首先要知道上BI项目是不是符合企业的战略目标, 是不是能给企业带 ...
- 判断字符串是否为回文 python
回文正序和逆序一样的字符串,例如abccba 方法一 def is_palindrome1(text): l = list(text) l.reverse() t1 = ''.join(l) if t ...
- web应用安全权威指南(文摘)
第1章 什么是web应用的安全隐患 第3章 Web安全基础,HTTP,会话管理,同源策略 content_length 字节数 content_type mime类型 百分号编码 referer :请 ...
- WCF技术剖析(卷1)WCF全面解析文摘
第1章 wcf简介 soa体现的是一种对关注点进行分解的思想,与技术无关 soa的基本思想: a.服务自治 独立部署,不依赖其他 b.依赖于开放的标准 采用xml,xsd,及wsdl作为服务描述的 ...
- 无脑无负担网站架构-- Application Request Route的一些应用
首先作为一个.net 程序员,多数情况你懒的整什么架构啊.框架啊.还有那命令行的linux,别说linux也有桌面,那个桌面用起来更让人抓狂,一直不明白居然有人说喜欢上linux的命令行,装B还是SB ...
- python二叉树染色-有严重BUG
#coding:utf-8 ''' 二叉树涂黑 输入: 5 2 1 -1 4 2 -1 5 4 -1 3 1 1 2 输出: 3 第二题是:斗地主 ''' import sys b=list() cl ...
- 咏南中间件当作WEB SERVER使用方法
咏南中间件当作WEB SERVER使用方法 1)开启咏南中间件 2)浏览器打开http://localhost:5566/web?page=echo.html