• 移动端网站,键盘弹出对页面的影响


    在移动端网站中,ios与安卓键盘弹出时对页面有不同的处理方式。

    ios,键盘弹出但整体页面高度不变。

    安卓,页面高度=屏幕高度-键盘高度

    这样对页面样式就会造成不同的影响。

    当有表单弹窗,且弹窗高度在页面高度的50%左右时影响尤为严重。

    在安卓中:弹窗的头部很有可能被顶到页面之外,且无法滑动察看完整的弹窗信息。

    在最近的一个移动端项目中,对滑动部分使用了 calc设置高度(是微信网站,兼容-webkit-。 关于calc的兼容性不甚明白,但在使用的时候似乎没遇到兼容性问题(主要是微信网站,测试过的机型包括 iphone4+,)使用vh计算元素高度(vh似乎也有兼容性问题但同样没遇到))

    但文本框呼出键盘时页面被推起,因为是计算好的高度,底部导航紧贴着键盘顶部了。

    此时的高度或者是vh不再根据整个页面的高度计算。

    解决方案:

    将页面的高度固定下来,即先用js无论在文本框获得焦点时,还是在页面载入时首先将元素的高度固定下来,并保持body的高度。

    这样键盘弹出时页面的布局高度不变,并可以正常的上下滑动。

    另外移动端的网站很有必要对一些icon进行预加载,防止点击时icon闪烁。

  • 相关阅读:
    Spring中配置和读取多个Properties文件
    python 数据清洗
    python excel 文件合并
    Pandas -- Merge,join and concatenate
    python 数据合并
    python pandas
    python Numpy
    EXCEL 导入 R 的几种方法 R—readr和readxl包
    R语言笔记完整版
    第十三章 多项式回归分析
  • 原文地址:https://www.cnblogs.com/rohanCh/p/7383673.html
Copyright © 2020-2023  润新知