在开发移动或者PC端的时候除了'<meta charset="UTF-8">'这个设置编码格式的meta标签,还有一些其他方面的设置

一、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。  
<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 - 用户是否可以手动缩放

二、<meta name="format-detection" content="telephone=no">

当该 HTML 页面在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

在 iPhone 上默认值是:

<meta name="format-detection" content="telephone=yes"/>

如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:

<meta name="format-detection" content="telephone=no"/>

三、<meta name="apple-mobile-web-app-capable" content="yes" />

说明:网站开启对web app程序的支持。

四、<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明:

在web app应用下状态条(屏幕顶部条)的颜色;
默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

!!!!苹果web app其他设置:

当然,配合web app的icon 和 启动界面需要额外的两端代码进行设定,如下所示:

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
说明:这个link就是设置web app的放置主屏幕上icon文件路径

使用:

该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
说明:这个link就是设置启动时候的界面(图片五),放置的路劲和上面类似。

使用:该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。

官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。
五、<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕“后,全屏显示 <meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。
--------------------- 

原文:https://blog.csdn.net/ye1992/article/details/22714621

html5 meta标签的认知储备的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. HTML5 <meta> 标签属性,所有meta用法都在这里了

    基本标签SEO 优化为移动设备添加 viewportWindows 8其他 禁止数字识自动别为电话号码不让android识别邮箱每 8 秒刷新一次页面移动端的头部标签和meta 基本标签 声明文档使用 ...

  3. HTML5 <meta> 标签属性

    基本标签SEO 优化为移动设备添加 viewportWindows 8其他 禁止数字识自动别为电话号码不让android识别邮箱每 8 秒刷新一次页面移动端的头部标签和meta 基本标签 声明文档使用 ...

  4. HTML5 <meta> 标签属性,所有meta用法

    基本标签 声明文档使用的字符编码:<meta charset="utf-8" /> 声明文档的兼容模式:<meta http-equiv="X-UA-C ...

  5. meta 详解,html5 meta 标签日常设置

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  6. html5 meta标签属性整理

    声明文档使用的字符编码 <meta charset='utf-8'> 声明文档的兼容模式 //指示IE以目前可用的最高模式显示内容<meta http-equiv="X-U ...

  7. HTML5 meta标签的用法

    声明文档使用的字符编码:<meta charset="utf-8" />声明文档的兼容模式:<meta http-equiv="X-UA-Compati ...

  8. html5 meta标签

     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-sca ...

  9. 最全html5 meta设置详解 (转)

    meta 详解,html5 meta 标签日常设置   <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...

随机推荐

  1. CentOS7使用httpd apache 和firewalld打开关闭防火墙与端口

    Centos7 使用systemctl 工具操作命令 systemctl 是Centos7的服务管理工具中的主要工具 ,它融合之前service和chkconfig的功能于一体 一.httpd的设置 ...

  2. Transaction2

    5. 事务状态 TransactionInformation 上面讲解过事务分为本地事务与分布式事务,而Transaction类的TransactionInformation是事务状态的记录,它可以跟 ...

  3. HashMap分析

    原文链接:http://www.cnblogs.com/chengxiao/p/6059914.html 一.什么是哈希表 在讨论哈希表之前,我们先大概了解下其他数据结构在新增,查找等基础操作执行性能 ...

  4. python 安装插件 requests、BeautifulSoup

    安装第三方插件库 1. requests  , 下载地址 https://github.com/requests/requests 安装: 利用 pip 安装 pip3 install request ...

  5. SpringLog4j日志体系实现方式

    1.通过web.xml读取log4j配置文件内容 2.通过不同的配置信息,来实现不同的业务输出,注意:log4j可以写入tomcat容器,也可以写入缓存,通过第三方平台读取 #输入规则#log4j.r ...

  6. 【Java】【问题】

    [log4j:WARN No appenders could be found for logger 解决方案] [解决] 我们在使用Log4j的时候,总是出现: log4j:WARN No appe ...

  7. MD5加密与Hash加密

    一.Md5加密 MD5算法具有以下特点: 1.压缩性:任意长度的数据,算出的MD5值长度都是固定的. 2.容易计算:从原数据计算出MD5值很容易. 3.抗修改性:对原数据进行任何改动,哪怕只修改1个字 ...

  8. Java里的String类为什么是final的

    今天在看<图解设计模式>,里面出了一个问题“String类用final修饰,导致它无法被继承(扩展),这样做违反了开闭原则,这么做有什么正当理由?” 答案是效率和安全性  首先是效率,由于 ...

  9. JavaSE习题 第七章 常用实用类

    问答题 1.怎样实例化一个Calendar对象? Calendar ca=Calendar.getInstance(); 2.Calendar对象调用set(1949,9,1)设置的年月日分别是多少? ...

  10. Math.abs(~2020) 按位取反后的绝对值是多少 2021, 按位取反后,比正数多1

    Math.abs(~2020)  按位取反后的绝对值是多少 2021, 按位取反后,比正数多1 int 值的取值 范围:   -128 ---  127   之间, 0000 0000     按位取 ...