移动端与PC端的viewport
第一种解析:
- 设备像素,就是我们直觉上觉得"靠谱"的像素,这些像素为所使用的各种设备提供了正规的分辨率,并且其值可以通过(通常情况下)从screen.width/height属性中读出;
- css像素,就是css自定义的像素,需要注意的是css像素与设备像素不是一回事;
第二种解析:
- CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容。
- device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。
PPI(DPI)的计算公式:
1 css pixels = (devicePixelRatio)^2 device pixels
以iphone 4(960px * 640px)来作为计算的事例:
手机屏幕的对角线等效像素 = 960^2 + 640^2
如何获取屏幕的尺寸:
可以通过使用screen.width/height来获取,获取出来的值就是用户屏幕的整体大小;
度量单位:设备像素;
浏览器:IE7&IE8都存在以css像素对其进行度量的问题;
注意:在ios和android会存在不同的区别;
窗口尺寸:
window.innerWidth/Height , 浏览器窗口的整体大小,包括滚动条,当然不包括浏览器的菜单栏,地址栏,度量单位:css像素,浏览器IE7不支持,opera以设备像素进行度量。
参考文章:详情请见于此处
posted on 2014-08-09 13:16 smelikecat 阅读(439) 评论(0) 编辑 收藏 举报