apicloud 获取手机虚拟键盘高度

水深无声 2022-04-02 13:13 489阅读 0赞

现在带虚拟键盘的手机越来越多，又成功的为前端开发者找了个事做。在使用apicloud开发APP中，如果有自定义原生模块的化，有的时候需要避免虚拟键盘带来的一系列体验问题。获取虚拟键盘高度经查阅官方文档及论坛都没有找到答案，只能亲自操刀了，其实计算也是非常简单的

在最开始我觉得计算的话应该要知道逻辑分辨率与物理分辨率的比例，可是查完了文档也没找到获取屏幕像素比（dpr）的方法，只能从有限的接口中找方法了。

apicloud窗口尺寸获取接口：

1.  api.screenWidth       //屏幕分辨率宽，数字类型
2.  api.screenHeight     //屏幕分辨率高，数字类型
3.  api.winWidth   //当前 window 宽度，数字类型
4.  api.winHeight  //当前 window 高度，数字类型

经过查看接口所返回的值后得知：

*  api.screenWidth 和 api.screenHeight 返回的是 物理像素分辨率。
 *  api.winWidth 和 api.winHeight 返回的是 逻辑像素分辨率。

由上面的信息写出代码：

function getNavigationBarHeight(){
          var dpr=api.screenWidth/api.winWidth;
          var height=api.screenHeight/dpr-api.winHeight;
          height=height>Math.floor(height)?(Math.floor(height)+1):height;
          return (height>0?height:0);
    }

## 当前项目所使用的效果，完美的解决问题，再也不怕系统操作按键被遮挡啦 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220402/c0cf2c25e1c5402d88ee1dc8aaa43504.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220402/911be07b4f214dc584ce87b18377978d.png