记一次安卓适配的解决

记一次安卓适配的解决

  众所周知,安卓相比ios麻烦的地方主要是由于版本以及各厂商深度定制带来的适配问题,这里就记录一次解决同一个网页,ios和android显示位置不一致问题的经历。
  
  这里的位置不一致指的是同一个dialog在ios上弹出在一个输入框(输入框是网页里面的控件)正下方,而android则会遮住输入框,导致无法看见自己输入的内容。
  
  导致这一原因的因素有以下三个,状态栏的高度,webview距离状态栏的高度以及网页的设备像素比(devicePixelRatio),其中devicePixelRatio是我之前的知识盲点,今天也主要是为了记录这个只是缺口。
  
  为了完整性,这里也给出状态栏高度的获取方式,如下:

Rect outRect = new Rect();
             this.getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect);//this是当前的activity对象  

int statusBarHeight = outRect.top;//得到状态栏高度

  然后webview距离状态栏的高度:webview.getTop();
  
  最后来说今天的主角:设备像素比,在页面中可以以window.devicePixelRatio获取得到,大多数webkit内核浏览器和opera都支持这个属性,不过麻烦的是他们的值很多都不一样。
  
  来看下定义:
  

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dip),就是css像素)的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dip

  这之后,本菜鸟去翻阅了个大神的博客,看的云里雾里的,到最后也只是知道devicePixelRatio这个值是可以用来缩放的,于是我大胆猜测,我最后需要的dialog弹出的位置坐标 =
  webview.getTop() + 状态栏高度 + 网页返回的值*devicePixelRatio。

  最后我的猜想得到了验证,但是原理上还是有点懵逼,再次跪求哪位大神看到了能给讲解下。
  
  最后分享下讲这个概念讲的比较深的文章设备像素比devicePixelRatio简单介绍

猜你喜欢

转载自blog.csdn.net/nuyunhai/article/details/78296753