手机端h5适配<mete>标签
2016-02-24 08:44
453 查看
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标签支持的属性以及它们的默认值。当有多个属性时,应该使用逗号分隔赋值表达式。设置多个属性时请遵循以下规则:
不要使用分号作为分隔符。
空格也可以作为分隔符,但最好使用逗号。
对于属性值是数字的属性,如果属性值包含了非数字字符但是以数字开头,那么只有数字的部分被当做属性值。例如,1.0x等价于1.0,123x456等价于123。如果参数不以数字开头,则属性值为0。
当要用到设备的尺寸数据时,你可以使用表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">
设置视口的宽度为设备的宽度,最大与最小缩放比例,禁止用户缩放(常用)
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
兼容性iOS 1.0 +
属性 | 描述 |
---|---|
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标签的文本域中输入文本时页面发生滚动。 |
属性值 | 描述 |
---|---|
device-width | 设备的宽度(像素)。 |
device-height | 设备的高度(像素)。 |
相关文章推荐
- 关于iOS和OS X废弃的API你需要知道的一切
- object 转换成String的注意事项
- Android中SharedPreferences函数具体解释
- Android应用程序快速更换包名的方法
- 【转】Android短信发送和监控
- 如何写webview
- android短信监听工具(示例代码)
- 不同版本(2.3,2.4,2.5) web.xml 的web-app头信息
- SpringMVC源码解读 - RequestMapping注解实现解读 - ConsumesRequestCondition
- 【Cocos2d-x】截图分享功能
- 【Android Tricks 6】ViewPager首页与尾页的滑动动作响应
- iOS-KVO使用避免的陷阱
- 【Android】自定义view的模版
- 【Android】监听蓝牙状态变化
- 【Android】使用ProgressBar遇到的问题
- kidd风的IOS日志之GCD详解
- kidd风的IOS日志之iOS开发多线程篇—多线程简单介绍
- android xml点击交互
- iOS 开发 -- Swift 语法篇 (六) 集合
- 【Android】沉浸式状态栏的两种实现方式