码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-05-03 22:41:23      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:类型   图片设计   tail   cheng   ati   比较   type   blank   设计图   

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

 

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

标签:类型   图片设计   tail   cheng   ati   比较   type   blank   设计图   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!