移动端键盘弹起时界面变窄

css

字数统计: 218阅读时长: 1 min

 2019/07/05   Share

相信大家都遇到过键盘弹起时页面高度变窄的情况，但元素宽度变窄，是不是闻所未闻？所以遇到问题时排查了很久，一直以为是兼容性问题（因为只在部分手机上出现），网上都没有搜到类似情况，却在某一刻突然恍然大悟……

因为页面样式中，用了vmin来转换，所以～由于在键盘弹起时，页面高度变窄了，在部分手机上，页面高度变得小于页面宽度了，所以此时vmin代表的是变窄时的页面高度。所以其实是，整个页面中用了vmin来设置尺寸元素，都变小了。如果想避免这个问题，把vmin改成vw就好了。vmin尽量只在需要时用，比如需要适配手机横屏时等。

原文作者：Nieyt

原文链接：https://nieyt.github.io/2019/07/05/soft-keyboard-narrow-the-page-width/

发表日期：July 5th 2019, 12:20:09 am

更新日期：July 5th 2019, 11:33:54 am

Next Post

js函数柯里化的使用场景及实现
Previous Post

egret MovieClip怎样在某一帧停止播放

CATALOG



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true