文档章节

WebApp 的 meta 标签

sHarenZ
 sHarenZ
发布于 2015/03/22 17:20
字数 1048
阅读 7
收藏 0

WebApp 的 meta 标签  

apple-mobile-web-app-capable设置Web应用是否以全屏模式运行。

  • 语法:

  • <meta name="apple-mobile-web-app-capable" content="yes">

  • 说明:

  • 如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

  • 兼容性:

  • iOS 2.1 +

apple-mobile-web-app-status-bar-style

设置Web App的状态栏(屏幕顶部栏)的样式

  • 语法:

  • <meta name="apple-mobile-web-app-status-bar-style" content="blank">

  • 说明:

  • 除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。

    如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。

  • 兼容性

  • iOS 2.1 +

format-detection

启动或禁用自动识别页面中的电话号码。

  • 语法:

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

  • 说明:

  • 默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

  • 兼容性

  • iOS 1.0 +

viewport

  • 语法:

  • <meta name="viewport" content="width=230,initial-scale=2.3,user-scalable=no">

  • 说明:

  • 使用viewport meta标签可以提升页面在设备上的表现效果,典型地,你可以设置视口(viewport)的宽度和初始缩放比例。

    举个例子来说,如果页面的宽度小于980px,你可以设置视口的宽度以适应页面。如果你正在开发一款Web应用,你应该设置视口的宽度为设备的宽度。

    表 1 描述了viewport meta标签支持的属性以及它们的默认值。当有多个属性时,应该使用逗号分隔赋值表达式。设置多个属性时请遵循以下规则:

    当要用到设备的尺寸数据时,你可以使用表2中的常量替代数字值。例如,使用device-width替代320(宽度),用device-height替代480(高度)。

    你不需要设置每一个属性,未设置的属性会自动采用默认值。

    设置视口的宽度为设备的宽度:

    <meta name="viewport" content="width=device-width">

    设置初始缩放比例为1.0:

    <meta name="viewport" content="initial-scale=1.0">

    设置初始缩放比例,同时禁止用户缩放。

    <meta name="viewport" content="initial-scale=2.3, user-scalable=no">

    • 不要使用分号作为分隔符。

    • 空格也可以作为分隔符,但最好使用逗号。

    • 对于属性值是数字的属性,如果属性值包含了非数字字符但是以数字开头,那么只有数字的部分被当做属性值。例如,1.0x等价于1.0,123x456等价于123。如果参数不以数字开头,则属性值为0。

  • 兼容性

  • iOS 1.0 +

表 1 Viewport 属性
属性 描述
width 视口的宽度。默认值是980,取值范围是200至10000,也可以取值为常量device-width。
height 视口的高度。默认值是根据width的值和设备的宽高比来计算,取值范围是223至10000,也可以取值为常量device-height。
initial-scale 视口的初始缩放比例。默认值取决于页面充满屏幕的缩放比例,取值范围取决于minimum-scale和maximum-scale。
minimum-scale 视口的最小缩放比例。默认值是0.25,取值范围是>0至10.0。
maximum-scale 视口的最大缩放比例。默认值是5.0,取值范围是>0至10.0。
user-scable 设置用户是否可以缩放视口。yes表示可以,no表示不能,默认值是yes。设置user-scable为no可以防止当用户在input标签的文本域中输入文本时页面发生滚动。
表 2 特殊的viewport属性值
属性值 描述
device-width 设备的宽度(像素)。
device-height 设备的高度(像素)。

本文译自:Safari HTML Reference


本文转载自:

sHarenZ
粉丝 0
博文 4
码字总数 2193
作品 0
绵阳
程序员
私信 提问
移动端Web系列4 -- meta

分类 在介绍移动端特有 meta 标签之前,先简单说一下 HTML meta 标签的一些知识。 meta 标签包含了 HTTP 标题信息(http-equiv) 和页面描述信息(name)。 http-equiv: 该枚举的属性定义,可以改...

见见
2018/08/27
0
0
手机端适配(二)

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备。 我相信各位童鞋应该和我一个样子,...

前端小虾
2016/10/10
11
0
微信公众平台开发:进阶篇(Web App开发入门)

WebApp与Native App有何区别呢? Native App: 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包...

LorinLuo
2015/03/06
0
0
WebApp与Native App的区别

WebApp与Native App的区别 Native App: 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包,且需...

一真的鱼
2018/07/03
0
0
手机/移动前端开发需要注意的20个要点

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; 第二个meta标签是iphone设备中的safari私有meta标签,它表示:允...

陈映亮
2014/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
3分钟前
0
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
3
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
3
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
8
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部