首页 > 代码库 > viewport
viewport
在做最新的小游戏当中,用了③的viewport,总算是都兼容了。②的在安卓4.4.4中字体会变大。 --2015-01-12
在做手机项目中css(viewport 具体叫什么?控制屏幕大小)
<meta name="viewport" content="target-densitydpi=640*320/x,width=device-width, initial-scale=.5, maximum-scale=.5, minimum-scale=.5">
<meta name="viewport" content="initial-scale=.5, user-scalable=no, minimum-scale=.5, maximum-scale=.5, width=device-width,target-densitydpi=medium-dpi"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
width – viewport的宽度,控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height – viewport的高度
initial-scale – 初始的缩放比例,也即是当页面第一次 load 的时候缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
在安卓的手机中还要加上一句 target-densitydpi=640*320/x
对于ios设备,设置width可以生效,但对于android,设置width并不会生效。ios设备,缩放的比率即dpi是通过你设置的width和 设置真实分辨率自动计算的,而android下你设置width无效,你能设置的是一个特殊的字段target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。
- device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
- high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
- medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
- low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
- <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
http://www.xiaocaoge.com/demo/viewport-screen-device-width-mobile.html
http://viewportsizes.com/?filter=
viewport