正确的手机头部声明(android,iphone)
2013-12-11 21:33
253 查看
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>xxxx</title>
</head><body></body>
</html>
这里面有个meta标签很重要,viewport。
1.什么Viewport?
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的Safari浏览器最新引进了viewport这个meta tag,让网页开发者来控制viewport的大小和缩放,其他手机浏览器也基本支持。
注意在内容之前在HEAD标签内有一个viewport的meta标签设定了浏览器怎样展示页 面的缩放等级和范围。如果没有设置的话,许多移动设备的浏览器会使用一个“虚 拟的”页面宽度,大约是900PX宽,使得桌面的网站工作的也很好,但是这样屏幕看 起来是缩小的而且太宽了。通过设置viewport属性为content="width=device- width, initial-scale=1,会使宽度会被设定为设备的屏幕宽度。
这个设置没有没有禁用用户缩放页面的权限,使得可访问性非常好。但是在iOS设备 上有一个小问题,就是旋转屏幕的时候,这个viewport的设定没有设置宽度,在将 来的版本我们希望能修正。如果有需求的话,你可以设定viewport 的其他的属性来 禁用缩放。
2.一般的写法一个常用的针对移动网页优化过的页面的viewport meta标签大致如下:
<meta name = "viewport" content = "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" / >
width:控制viewport的大小,可以指定的一个值,如果600,或者特殊的值,如device - width为设备的宽度(单位为缩放为100 % 时的CSS的像素)。
height:和width相对应,指定高度。
initial - scale:初始缩放比例,也即是当页面第一次load的时候缩放比例。
maximum - scale:允许用户缩放到的最大比例。
minimum - scale:允许用户缩放到的最小比例。
user - scalable:用户是否可以手动缩放
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>xxxx</title>
</head><body></body>
</html>
这里面有个meta标签很重要,viewport。
1.什么Viewport?
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的Safari浏览器最新引进了viewport这个meta tag,让网页开发者来控制viewport的大小和缩放,其他手机浏览器也基本支持。
Viewport的meta标签
注意在内容之前在HEAD标签内有一个viewport的meta标签设定了浏览器怎样展示页 面的缩放等级和范围。如果没有设置的话,许多移动设备的浏览器会使用一个“虚 拟的”页面宽度,大约是900PX宽,使得桌面的网站工作的也很好,但是这样屏幕看 起来是缩小的而且太宽了。通过设置viewport属性为content="width=device- width, initial-scale=1,会使宽度会被设定为设备的屏幕宽度。<meta name="viewport" content="width=device-width, initial-scale=1">
这个设置没有没有禁用用户缩放页面的权限,使得可访问性非常好。但是在iOS设备 上有一个小问题,就是旋转屏幕的时候,这个viewport的设定没有设置宽度,在将 来的版本我们希望能修正。如果有需求的话,你可以设定viewport 的其他的属性来 禁用缩放。
2.一般的写法一个常用的针对移动网页优化过的页面的viewport meta标签大致如下:
<meta name = "viewport" content = "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" / >
width:控制viewport的大小,可以指定的一个值,如果600,或者特殊的值,如device - width为设备的宽度(单位为缩放为100 % 时的CSS的像素)。
height:和width相对应,指定高度。
initial - scale:初始缩放比例,也即是当页面第一次load的时候缩放比例。
maximum - scale:允许用户缩放到的最大比例。
minimum - scale:允许用户缩放到的最小比例。
user - scalable:用户是否可以手动缩放
相关文章推荐
- 正确的手机头部声明(android,iphone)
- 为什么iphone手机比android手机流畅
- Google:Android手机日出货6.5万台媲美iPhone
- Android 正则表达式验证手机和邮箱格式是否正确
- 45套精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具
- android 判断 手机号码、邮编、Email邮箱、是否正确
- ubuntu 下正确安装android手机驱动
- Android 【信号格的客制化】Part 3:手机上显示的信号强度dbm值不正确
- 移动平台前端开发总结(针对iphone,Android等手机)
- Android 验证输入的手机和邮箱字符串格式是否正确
- 10月24日3G手机(Android/iPhone)高级技术讲座(北京)
- Android iphone手机分辨率尺寸比例整理
- unity iPhone和android手机 可读写目录
- 精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具
- ubuntu中正确设置android手机驱动程序
- 移动平台前端开发总结(针对iphone,Android等手机)
- 智能手机系统对比 Android vs iPhone
- 转载【判断 ipad,iphone,android,手机,电脑登录页面 】