移动端界面devicePixelRatio问题与移动端软键盘keyCode

Posted 2020-11-02 小数点就是问题

现在移动端颗粒度越来越小，所以清晰度很高，如华为p9的devicePixelRatio为4，

这是有多变态，devicePixelRatio是物理像素/逻辑像素=倍率devicePixelRatio，所以

如倍率为4，一个像素在设备上放大了4倍，所以真实4像素是很难在设备上展示出现的，

只能使用缩放等手段去实现，这就像为什么1px边框很难在设备实现一样，现在设备都是

倍率为2，所以经常在网上看到缩小0.5的css方式，这也是为什么经常可以看到一些UI设计图

会有@3x\\@2x等图片设计，因为兼容3、2倍率的设备，手机上图片是最容易被发现模糊化的。

target- densitydpi 已被抛弃，所以不要使用了。

之前一遍介绍过vw，可以使用它，那么就可以不那么费力开发了：gulp自动编译为css的vw单位

资料：

viewport手机逻辑像素与物理像素原理

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

 

移动端软键盘keyCode获取只有keyup与keydown才能获取，其他都不行，或者有兼容问题。
还有一般输入太快或一次输入太多到文本框、还有输入中文等就会出现229，所以这也是问题，
所以我觉得没必要就不要使用，因为它不想PC端那么精确使用。
还有软键盘的出现会改变高度，所以可以直接获取文档高度确认或resize事件。
还有多个input会在一起不会不断触发伸缩软键盘，只会只有第一个触发后其他再切换触发不会触发的。
所以六个格子是可以直接6个input实现。

type类型再移动端是作用比较大。
比如type=number直接就是数字九宫格，不能输入出了+-.数子之外的字符，
type=tel,就和手机电话的一样，就只能输入手机的电话的格式内容东西。
比如数字*#等