移动端界面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

时间: 2024-08-13 02:27:52

移动端界面devicePixelRatio问题与移动端软键盘keyCode的相关文章

activity中界面中edittext自动获取焦点(软键盘弹出)解决

最近在做开发的时候遇到个比较烦的问题就是 我的某个activity页面中有editText,在一进去就会调用软键盘,这样看起来不美观,所以看了下api http://developer.android.com/guide/topics/manifest/activity-element.html(要翻墙) 在<Activity>节点下也就是在manifest文件的配置activity节点的时候需要配置 android:windowSoftInputMode 这个属性来控制软键盘的模式.我摘录了

移动端界面适配

本文引自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小一点. 所以今天做一个移动端页面适配的小小总结 适配的要求 1.在不同分辨率的手机上,页

移动端界面的适配

阅读目录 适配的要求 适配的方法,3个步骤 适配中背景图片的处理 适配的原理解析 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小一点. 所以今天做一个移动端页面适配的小小总结 回到顶部 适配的要求 1.在不同分辨率的手机上,页面看起来是自适应的

移动端界面设计之尺寸篇

移动端界面设计之尺寸篇 作者其它设计文章:PS图层样式之高级混合(1)PS图层样式之高级混合(2)手机音乐界面设计分析AE动画设计基础篇移动端界面设计之尺寸篇 作者在写这篇文章时候还没有出iphone6,所以把这一部分的给补上,相关的尺寸请点下面2篇文章查看. 移动端界面设计之尺寸篇(淘宝版) iPhone6 & 6 Plus 视觉设计适配说明 h5移动端页面设计学习文档

移动端界面中的版式设计原理(上)

移动端界面中的版式设计原理(上) --安阳师范学院互联网+应用技术学院UI设计方向讲师 黄艳芳设计本身就是一门理性的学科,审美因人而异,只有言之有理的设计才能够说服别人.当设计师拿到产品的原型开始做设计时,如果只是单纯的按照原型进行而不考虑任何规则,那么很多时候就会产生一些不协调的结果.设计完之后产品不满意,自己也不满意.在UI设计中其实也存在大量的版式设计原理,如果产品和设计都能对版式设计有一定的了解,那么设计师拿到原型的时候,评审设计输出稿的时候大家都能更好地理解对方的设计.以下我总结了几种

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如

Asp.net SignalR 实现服务端消息推送到Web端

原文:http://www.cnblogs.com/wintersun/p/4148223.html 之前的文章介绍过Asp.net SignalR,  ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.  今天我们来实现服务端消息推送到Web端,   首先回顾一下它抽象层次图是这样的: 实际上 Asp.net SignalR 2 实现 服务端消息推送到Web端, 更加简单. 为了获取更好的可伸缩性, 我们引入消息队列, 看如下

端游及手游服务端的常用架构

这篇文章还是讲的不错的: http://www.cocoachina.com/game/20150924/13545.html <开发者详解:端游及手游服务端的常用架构> 整理自知乎,文/韦易笑 开始的部分讲的比较简略.讲到后面大型MMO以及战网游戏,就比较入流了. 开宗明义,手游页游和端游的服务端本质上没区别,区别的是游戏类型. 类型1:卡牌.跑酷等弱交互服务端 卡牌跑酷类因为交互弱,玩家和玩家之间不需要实时面对面PK,打一下对方的离线数据,计算下排行榜,买卖下道具即可,所以实现往往使用简单

安卓移动端软键盘弹出问题解决方案

移动端开发难免拿到输入框居中或者位于底部的情况,ios 端,软键盘能够按正常预期向上滑动(这里有个问题,当 input 聚焦时,弹出软键盘,input 上滑,此时屏幕是具有滚动效果的,还没找到合适的解决方案),Android 端,并不会滑动,通常做法是设置 window.scrollTo(0, virtualKeyboard.Height), 但是如果你的 input 所在的 div 是绝对定位的话,window.scrollTo 这个事件是监听不到的,这里给出另一套解决方案 self.refs