Html=>Head=>meta
如今智能机遍布大街小巷,所以,如今的前端攻城师们要大 跨步的迈向移动互联网了,更何况Web App也应用广泛,可能原理还一样,但是一定会有新的东西出现,那就从“头”开始,看看头部那些Meta的新玩意。
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、 禁止把数字转化为拨号链接
- <meta name="format-detection" content="telephone=no" />
3、 禁止把邮箱地址作为邮件发送
- <meta content="email=no" name="format-detection" />
4、 隐藏浏览器的工具栏和菜单栏,看到apple了吧,对iso系统起用
- <meta name="apple-mobile-web-app-capable" content="yes" />
5、默 认值为 default(白色),可以定为black(黑色)和black-translucent(灰色半透明),需要说明的是值为“black- translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px高度 iphone4和itouch4的Retina屏幕为40px)
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
6、 "添加到主屏幕“后,全屏显示
- <meta name="apple-touch-fullscreen" content="yes">
介于说到了“头”,也说到了Web App,那就捎带说说两个苹果私有link,
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、
- <link rel="apple-touch-startup-image" href="logo_startup.png" media="(device-width: 320px)" />
这个 link 就是设置启动时候的界面,可用媒体查询调用不同图片
Html=>Head=>meta的更多相关文章
- 常用 meta 整理
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...
- meta标签
参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...
- Django模型类Meta元数据详解
转自:https://my.oschina.net/liuyuantao/blog/751337 简介 使用内部的class Meta 定义模型的元数据,例如: from django.db impo ...
- H5 meta小结
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, ...
- Asp.net 后台添加CSS、JS、Meta标签
Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...
- 较为完整的meta
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 浏览器内核控制Meta标签说明文档【转】
背景介绍 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览.基于IE的内核用于兼容网银.旧版网站.以360的几款浏览器为例,我们优先通过Webkit内核渲 ...
- HTML <meta> 标签,搜索引擎
关于Mate标签的详尽解释,请查看w3school 网址为:http://www.w3school.com.cn/tags/tag_meta.asp meta标签作用 META标签是HTML标记HEA ...
- 内核控制Meta标签:让360浏览器默认使用极速模式打开网页(转)
为了让网站页面不那么臃肿,也懒的理IE了,同时兼顾更多的国内双核浏览器,在网页页头中添加了下面两行Meta控制标签. 1,网页头部加入 <meta name="renderer&quo ...
- 使用视 meta 标签来控制手机浏览器布局
移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...
随机推荐
- 我的新发现:AVL树旋转的一个特性
关于AVL树旋转的代码网络上铺天盖地. 一些经典的实现方法如下: AVLTree SingleLeftRotation(AVLTree A) { AVLTree B = A->left; A-& ...
- 用Unity开发HTC VIVE——移动漫游篇
这篇文章主要写的是通过手柄控制移动在场景中漫游.在通过手柄控制移动时,我主要写了两个脚本一个ChildTransform.cs.Move.cs;1. ChildTransform这个脚本主要是为了获取 ...
- Ant执行Jmeter工程模版
<?xml version="1.0" encoding="GB2312"?><project name="ant-jmeter-t ...
- Web 通信 之 长连接、长轮询(转)
Web 通信 之 长连接.长轮询(long polling) 基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强 ...
- RobotFrameWork http/https oauth接口测试 (二)
在RobotFrameWork http/https oauth接口测试 (一)中,大致介绍了相关的概念,终于可以步入正题了~~~ 先介绍下项目背景: 公司的项目采用的授权模式是第三种resource ...
- Qt之键盘讲解
QWSInputMethod详解 注意:这个类不仅仅在嵌入式环境下有效 一个输入法包括了过滤器和可选的图形界面,用来过滤服务器和客户端应用程序之间 的输入事件. 创建自定义的输入法,需要得自QWSIn ...
- cxf(3.1.1) 客户端异常 请使用 @XmlType.name 和 @XmlType.namespace 为类分配不同的名称。
最近项目使用webService 于是就使用了最新版本 3.1.1 . cxf 客户端调用时老是出现这个错误,综合网上各种资料修改如下,问题解决 "@XmlType.name 和 @XmlT ...
- Linux内核内存管理子系统分析【转】
本文转载自:http://blog.csdn.net/coding__madman/article/details/51298718 版权声明:本文为博主原创文章,未经博主允许不得转载. 还是那张熟悉 ...
- WLST 命令和变量
下列部分将详细描述 WLST 命令和变量.主题包括: WSLT 命令类别概述 浏览命令 控制命令 部署命令 诊断命令 编辑命令 信息命令 生命周期命令 节点管理器命令 树命令 W ...
- 机器人操作系统(ROS)教程4:ROS的框架【转】
转自:http://www.arduino.cn/thread-11351-1-1.html 在进行ROS的代码开发前,有必要了解一些ROS的概念.首先,ROS的系统代码分为两部分:main和univ ...