一. DP、devicePixelRatio、物理像素、设备无关像素、Viewport一些知识点
首先需要知道几个概念:
- DP - 设备无关像素(为了解决物理像素适配问题)
- window.devicePixelRatio - 设备物理像素和设备无关像素(DP)的比例
window.devicePixelRatio = 物理像素 / DP
以iPhone为例子,下面是常见iPhone物理像素,设备无关像素(又名开发像素)及倍数
iPhone6p
物理像素 1242x2208
开发像素 414x736
倍数 3xiPhone6
物理像素 750x1334
开发像素 375x667
倍数 2xiPhone5,5s
物理像素 640x1136
开发像素 320x568
倍数 2xiPhone4,4s
物理像素 640x960
开发像素 320x480
倍数 2x
对于Web APP这边,我们也需要了解几个概念:
screen.width和screen.height 为开发像素(屏幕尺寸)
screen.width window.devicePixelRatio = 物理像素值
如iPhone4:
3202 = 640
window.innerWidth为浏览器尺寸(包含滚动条)
document.documentElement.clientWidth也为浏览器尺寸(不包含滚动条)
下面着重说说viewport,当你创建一个页面时,在没有设置viewport的时候,为了能在浏览器上展示所有内容,最常见的办法就是缩放至到看到整个页面内容(layout viewport). 如:
这张截图,左上角的Adaptation字非常小, 是因为缩放导致的.
用手指在字的位置让其放大后会显示成这样:
页面已经超出设备外(15… 30)
meta viewport就是为了解决这个事情而来.
|
|
viewport是网页默认的宽度和高度,width=device-width意思是网页宽度默认等于屏幕宽度(screen.width)
其他viewport meta参数:
nitial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到的最小比例
user-scalable:用户是否可以手动缩放
viewport meta开始是由Safari浏览器引入的, 详细了解可以移步:
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
这篇博文也非常不错:
http://www.quirksmode.org/mobile/viewports2.html
二.消除在触摸UI上点击延迟可加载FastClick
三.如何让分享的页面在微信上能显示logo
其实提到这,微信官方有正常用法不过那太麻烦,需要服务端支持.如果仅仅是个静态分享页面如何才能显示Logo呢?
|
|
上面这段代码其实算是个技巧。
四.new Image()赋src值后,需要在onload后执行相关内容
|
|
没查资料之前,折腾了挺久.想想也是,图片不可能立即就加载完成的,肯定需要回调.
五.调试移动端Web工具:
1.使用Chrome的自带的调试不同分辨率下的一个插件
2.weinre,这个是事后才知道的,很有用的工具
网友评论已有0条评论, 我也要评论