如今智能机遍布大街小巷,所以,如今的前端攻城师们要大 跨步的迈向移动互联网了,更何况Web App也应用广泛,可能原理还一样,但是一定会有新的东西出现,那就从“头”开始,看看头部那些Meta的新玩意。

1、

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这是一个移动端最常用的meta,定义页面的缩放,如上代表宽度以终端宽度为准,并且不允许用户缩放,更多属性如下:
width  -- 宽度(范围从200到10,000,默认为980像素/device-width缩放至终端宽度)
height  -- 高度(范围从223到10,000)
initial-scale  -- 初始的缩放比例 (范围从 > 0 到 10)
minimum-scale  -- 允许用户缩放到的最小比例
maximum-scale  -- 允许用户缩放到的最大比例
user-scalable  --  用户是否可以手动缩放 (no,yes)
target-densitydpi  --  dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi 定义为每英寸点的数量(dpi)
2、 禁止把数字转化为拨号链接

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

3、 禁止把邮箱地址作为邮件发送

  1. <meta content="email=no" name="format-detection" />

4、 隐藏浏览器的工具栏和菜单栏,看到apple了吧,对iso系统起用

  1. <meta name="apple-mobile-web-app-capable" content="yes" />

5、默 认值为 default(白色),可以定为black(黑色)和black-translucent(灰色半透明),需要说明的是值为“black- translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px高度 iphone4和itouch4的Retina屏幕为40px)

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

6、 "添加到主屏幕“后,全屏显示

  1. <meta name="apple-touch-fullscreen" content="yes">

介于说到了“头”,也说到了Web App,那就捎带说说两个苹果私有link,

1、

  1. <link rel="apple-touch-icon-precomposed" href="iphone_logo.png" sizes="72x72" />

这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径,href就是你ico的文件路径,sizes可以根据不同分辨率,对应不同的图片,尺寸如下:

IOS设备 最适尺寸(px)
iPhone 和 iTouch 57 x 57
retina iPhone 和 retina iTouch 114 x 114
iPad 72 x 72
retina iPad 144 x 144

如果没有指明 <sizes> 属性的大小,则默认值为57×57。
如 果所有的 <link> 标签序列中都没有符合官方推荐的最适尺寸的话,那么IOS会从所有比推荐的最适尺寸大的图标中选择尺寸最小的那一个,如果所有的 <link> 标签序列中的图标都比当前推荐的最适尺寸小的话,IOS会从这些图片中自动选择最大的那个来作为启动图标。
如果整个页面都没有指定任何的 apple-touch-icon 的图标的话,IOS则会自动去网站根目录寻找有 apple-touch-icon 和 apple-touch-icon-precomposed 前缀的图标文件。
2、

  1. <link rel="apple-touch-startup-image" href="logo_startup.png" media="(device-width: 320px)" />

这个 link 就是设置启动时候的界面,可用媒体查询调用不同图片

Html=>Head=>meta的更多相关文章

  1. 常用 meta 整理

    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...

  2. meta标签

    参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...

  3. Django模型类Meta元数据详解

    转自:https://my.oschina.net/liuyuantao/blog/751337 简介 使用内部的class Meta 定义模型的元数据,例如: from django.db impo ...

  4. H5 meta小结

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

  5. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  6. 较为完整的meta

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 浏览器内核控制Meta标签说明文档【转】

    背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...

  8. HTML <meta> 标签,搜索引擎

    关于Mate标签的详尽解释,请查看w3school 网址为:http://www.w3school.com.cn/tags/tag_meta.asp meta标签作用 META标签是HTML标记HEA ...

  9. 内核控制Meta标签:让360浏览器默认使用极速模式打开网页(转)

    为了让网站页面不那么臃肿,也懒的理IE了,同时兼顾更多的国内双核浏览器,在网页页头中添加了下面两行Meta控制标签. 1,网页头部加入 <meta name="renderer&quo ...

  10. 使用视 meta 标签来控制手机浏览器布局

    移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...

随机推荐

  1. 我的新发现:AVL树旋转的一个特性

    关于AVL树旋转的代码网络上铺天盖地. 一些经典的实现方法如下: AVLTree SingleLeftRotation(AVLTree A) { AVLTree B = A->left; A-& ...

  2. 用Unity开发HTC VIVE——移动漫游篇

    这篇文章主要写的是通过手柄控制移动在场景中漫游.在通过手柄控制移动时,我主要写了两个脚本一个ChildTransform.cs.Move.cs;1. ChildTransform这个脚本主要是为了获取 ...

  3. Ant执行Jmeter工程模版

    <?xml version="1.0" encoding="GB2312"?><project name="ant-jmeter-t ...

  4. Web 通信 之 长连接、长轮询(转)

    Web 通信 之 长连接.长轮询(long polling) 基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强 ...

  5. RobotFrameWork http/https oauth接口测试 (二)

    在RobotFrameWork http/https oauth接口测试 (一)中,大致介绍了相关的概念,终于可以步入正题了~~~ 先介绍下项目背景: 公司的项目采用的授权模式是第三种resource ...

  6. Qt之键盘讲解

    QWSInputMethod详解 注意:这个类不仅仅在嵌入式环境下有效 一个输入法包括了过滤器和可选的图形界面,用来过滤服务器和客户端应用程序之间 的输入事件. 创建自定义的输入法,需要得自QWSIn ...

  7. cxf(3.1.1) 客户端异常 请使用 @XmlType.name 和 @XmlType.namespace 为类分配不同的名称。

    最近项目使用webService 于是就使用了最新版本 3.1.1 . cxf 客户端调用时老是出现这个错误,综合网上各种资料修改如下,问题解决 "@XmlType.name 和 @XmlT ...

  8. Linux内核内存管理子系统分析【转】

    本文转载自:http://blog.csdn.net/coding__madman/article/details/51298718 版权声明:本文为博主原创文章,未经博主允许不得转载. 还是那张熟悉 ...

  9. WLST 命令和变量

    下列部分将详细描述 WLST 命令和变量.主题包括:  WSLT 命令类别概述  浏览命令  控制命令  部署命令  诊断命令  编辑命令  信息命令  生命周期命令  节点管理器命令  树命令  W ...

  10. 机器人操作系统(ROS)教程4:ROS的框架【转】

    转自:http://www.arduino.cn/thread-11351-1-1.html 在进行ROS的代码开发前,有必要了解一些ROS的概念.首先,ROS的系统代码分为两部分:main和univ ...