移动端 meta 标签笔记
移动平台对 meta 标签的定义
一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。
1、http-equiv 属性的 Content-Type 值(显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。
用法:
1
|
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> |
注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。
2、name 属性的 viewport 值(移动屏幕的缩放)
也就是可视区域。对于桌面浏览器,我们都很清楚 viewport 是什么,就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web,因此我们需要改变 viewport 值。
实际上我们可以操作的属性有 4 个:
width – // viewport 的宽度 (范围从 200 到 10,000,默认为 980 像素)
height – // viewport 的高度 (范围从 223 到 10,000 )
initial-scale – // 初始的缩放比例 (范围从 > 0 到 10)
minimum-scale – // 允许用户缩放到的最小比例
maximum-scale – // 允许用户缩放到的最大比例
user-scalable – // 用户是否可以手动缩放 (no,yes)
1
|
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
说明:
- 强制让文档与设备的宽度保持 1:1 ;
- 文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
- user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;
注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度
1
2
3
|
body { min-width : 320px ; } |
3、name 属性的 format-detection 值(忽略页面中的数字识别为电话号码)
1
|
< meta name = "format-detection" content = "telephone=no" /> |
说明:
- 使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch 点击数字为存入联系人,iPhone 为拨打电话),忽略将页面中的数字识别为电话号码。
- 若需要启用电话功能将 telephone=yes 即可,若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
4、name 属性的 apple-mobile-web-app-capable 值(网站开启对 web app 程序的支持)
1
|
< meta name = "apple-mobile-web-app-capable" content = "yes" /> |
说明:
- 网站开启对 web app 程序的支持。
- 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的。
5、name 属性的 apple-mobile-web-app-status-bar-style 值(改变顶部状态条的颜色)
1
|
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> |
说明:
- 在 web app 应用下状态条(屏幕顶部条)的颜色;
- 默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);
注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px )。
6、name 属性设置作者姓名及联系方式
1
|
< meta name = "author" contect = "liudanyun, liudy102@163.com" /> |
二、苹果 Web App 其他设置:
当然,配合 Web App 的 icon 和启动界面需要额外的两端代码进行设定,如下所示:
1
|
< link rel = "apple-touch-icon-precomposed" href = "iphone_logo.png" /> |
说明:这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径(图片四)。
使用:
- 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
- 图片尺寸可以设定为 57*57(px)或者 Retina 可以定为 114*114(px),iPad 尺寸为 72*72(px)
1
|
< link rel = "apple-touch-startup-image" href = "logo_startup.png" /> |
说明:这个 link 就是设置启动时候的界面。
使用:
- 放置的路径和上面一样。
- 官方规定启动界面的尺寸必须为 320*640(px),原本以为 Retina 屏幕可以支持双倍,但是不支持,图片显示不出来。
如果对 Web App 的这两个 meta 还有不能详细理解的可以查看官方解释:Meta Tags
关于 link 方面还有更多的参数设置(例如:iPod、iPad、iPhone 不同尺寸不同图标),可以查看官方标准文档:Configuring Web Applications
移动端 meta 标签笔记的更多相关文章
- 移动端meta标签设置
移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...
- 移动端meta标签整理-备
分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识. meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name). h ...
- PC端meta标签
下面介绍meta标签的几个属性,charset,content,http-equiv,name. 一.charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的lang特性的值覆 ...
- 移动端——meta标签
meta标签主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用. <meta http-equiv="Content-type" conte ...
- 移动端 :meta标签1万个作用
meta标签 <meta charset="utf-8"> <meta http-equiv="Content-Type" content=& ...
- html》meta标签笔记
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- 移动端meta标签
现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,如何阻止双击放大?user-scalable=no <!-- 禁止缩放 --> <meta name=”viewpor ...
- 移动端meta标签缓存设置
1.<meta charset="utf-8"> 2.<meta content="width=device-width, initial-scale= ...
- 移动端meta标签的使用和设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale= ...
随机推荐
- 初学java之(盒子分布)
import javax.swing.*; import java.awt.*; class WinGrid extends JFrame { Box basebox , boxv1,boxv2; p ...
- Android 编程下的代码混淆
什么是代码混淆 Java 是一种跨平台的.解释型语言,Java 源代码编译成中间”字节码”存储于 class 文件中.由于跨平台的需要,Java 字节码中包括了很多源代码信息,如变量名.方法名,并且通 ...
- webservice方法内用了session,asp.net调用时注意问题
可搜索相关:ASP.NET WebService 中使用 ASP.NET_SessionId 当前问题是:我们写了WebService给客户调用,第一个方法是登陆,传入用户名和密码,成功后在Webse ...
- spring关于urlpattern
视图解析器(ViewResolver)注册中央调度器定制处理器jsp页面搭建springmvc.xml配置效果图第一个案例提升----视图解析器关于urlpattern说法最好配成*.do 不能配成/ ...
- java.util 类 TreeSet<E>
java.lang.Object≥ java.util.AbstractCollection<E> ≥ java.util.AbstractSet<E> ≥ java.util ...
- kafka客户端代码解析
转载:http://backend.blog.163.com/blog/static/202294126201431724652597/ 可以使用服务器端下载的kafka二进制包及依赖,也可以通过ma ...
- BZOJ1595 [Usaco2008 Jan]人工湖
直接模拟...从最低的开始向两边拓展= = /************************************************************** Problem: 1595 ...
- BZOJ1579 [Usaco2009 Feb]Revamping Trails 道路升级
各种神作不解释QAQQQ 先是写了个作死的spfa本机过了交上去T了... 然后不想写Dijkstra各种自暴自弃... 最后改了一下步骤加了个SLF过了... 首先一个trivial的想法是$dis ...
- BZOJ1520 [POI2006]Szk-Schools
裸的费用流啊... 建图:对于一个点p拆成两个p1和p2,S向p1连边,流量为1,费用为0:p2向T连边流量为1,费用为0 然后i1向a2到b2分别连边,不妨设i1向p2连边,流量为1,费用为|i - ...
- Skrollr.js -- 使用Skrollr创建视差滚动效果页面
使用方法: http://www.helloweba.com/view-blog-262.html http://www.uedsc.com/skrollr.htmlhttp://www.hello ...