[转] -- html5手机网站自适应需要加的meta标签
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放
<meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/>
下面是对于这个标签的具体说明:
viewport 语法介绍:
<meta name="viewport"
content包含有以下几个属性:
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
width
width表示网页的布局layout宽度,控制 viewport 的大小,可以指定的一个值(默认单位px)或者特殊的值,如:
width=960, initial-scale=0.33(960是页面layout的宽度,这里设width意思是将其它缩小到大约1/3,这样正好可以在320像素的手机设备上看到整个网页)
或
width=device-width (设备的宽度,通用写法)
height
和width用法相同,指定高度。
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
下面是 target-densitydpi 属性的 取值范围
device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
1 <!-- html document -->
2 <meta name="viewport" content="target-densitydpi=device-dpi" />
3 <meta name="viewport" content="target-densitydpi=high-dpi" />
4 <meta name="viewport" content="target-densitydpi=medium-dpi" />
5 <meta name="viewport" content="target-densitydpi=low-dpi" />
6 <meta name="viewport" content="target-densitydpi=200" />
为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。
initial-scale
初始缩放。即页面打开时默认的初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。
minimum-scale
最小缩放,用法同maximum-scale相同
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。
注意:所有的缩放值都必须在0.01–10的范围之内。
另附meta标签其它常用的属性用法解析:
1、<meta name="format-detection"/> 的用处
在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。
在 iPhone 上默认值是:
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:
<meta name="format-detection" content="telephone=no"/>
2.<meta name="apple-mobile-web-app-capable"/>的用处
<meta name=”apple-mobile-web-app-capable” content=”yes” />
这apple-mobile-web-app-capable的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
3.<meta name="apple-mobile-web-app-status-bar-style"/>的用处
作用是控制状态栏显示样式:
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
default:默认; black:纯黑; black-translucent:半透明灰色
原文连接:http://www.cnblogs.com/Brose/p/webapp_meta.html
[转] -- html5手机网站自适应需要加的meta标签的更多相关文章
- html5手机网站需要加的那些meta标签,手机网站自适应
的html5相关meta和标签 a.<!-- 强制让文档与设备的宽度保持1:1 --> <meta name="viewport" content=& ...
- html5手机网站需要加的那些meta/link标签,html5 meta全解
原文链接:http://blog.csdn.net/kongjiea/article/details/17092413(收藏专用!如需转载,请点击链接,联系博主,获得同意后方可转载) 3.name之设 ...
- Swiper滑动Html5手机浏览器自适应
手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度. window.onload=function(){ var swiper = d ...
- 手机网站下拉加载数据js(简单版)
加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...
- html网站meta标签大全
案例 一.天猫 <meta charset="utf-8"> <title>天猫TMALL</title> <meta name=&quo ...
- HTML5移动端手机网站开发流程
基本上开发手机网站,可大致分为两大类.一类是用框架开发手机网站.一类是自己手写手机网站. 一.框架开发手机网站 一般用现在常用的开发框架有:目前Web前端最火的框架(BootStrap).jQuery ...
- 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应
转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...
- HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 》》HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
随机推荐
- Java序列化注意事项
当父类继承Serializeble接口时,所有子类可以被序列化 子类实现了Serializeble接口,父类没有,父类中的属性不能序列化(不报错,数据会丢失),但是在子类中属性仍能正确序列化 如果序列 ...
- MYSQL binlog 日志内容查看
记录mysql数据库真正执行更改的所有操作(DML语句),不包含那些没有修改任何数据的语句,不会记录select和show这样的语句. 二进制日志的作用: 1. 可以完成主从复制的功能 2. 进行恢复 ...
- POJ 2184 DP
思路: f[j]表示当ts的和为j的时候tf的最大值. 这时候要分情况讨论: (我把状态平移了101000) 若ts[i]>=0倒序循环 否则正序 (防止ts被用了多次) f[101000]=0 ...
- android实现自动安装
安装: String str = "/CanavaCancel.apk"; String fileName = Environment.getExternalStorageDire ...
- Linux部署之批量自动安装系统之Kickstart篇
1. 安装 2. 在桌面环境下啊配置 3. Kickstart之基本配置 4. Kickstart之安装方法 5. ...
- ASP调用WebService转化成JSON数据,附json.min.asp
首先定义SOAP数据,然后创建HTTP对象,然后使用POST提交,获取状态码为200,就说明调用成功,再进行下一步操作…… <!--#Include virtual="/Include ...
- hiho1605 - 递推+1000000000=矩阵快速幂
题目链接 题目大意 小Hi最近对生成树(包含所有顶点的联通无环子图.)非常的感兴趣,他想知道对于特定的简单平面无向图是不是存在求生成树个数的简单方法. 小Hi定义了这样的图:一个以{0,1,2……n} ...
- 《Unix环境高级编程》读书笔记 第7章-进程环境
1. main函数 int main( int argc, char *argv[] ); argc是命令行参数的数目,包括程序名在内 argv是指向参数的各个指针所构成的数组,即指针数组 当内核执行 ...
- 视图层 view
视图层是 Django 处理请求的核心代码层,我们大多数 Python 代码都集中在这一层面.它对外接收用户请求,对内调度模型层和模版层,统合数据库和前端,最后根据业务逻辑,将处理好的数据,与前端结合 ...
- MySQL的concat以及group_concat的用法
一.concat()函数 1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产生的字符串,如果有任何一个参数为null,则返回值为nu ...