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

现在移动端颗粒度越来越小,所以清晰度很高,如华为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,就和手机电话的一样,就只能输入手机的电话的格式内容东西。
比如数字*#等

原文地址:https://www.cnblogs.com/zhangzhicheng/p/8987902.html