记响应式布局vh/vw单位在安卓端微信浏览器以及UC浏览器的坑

页面使用vh来控制元素高度的时候，在安卓端浏览器虚拟键盘弹出时，导致视口高度改变，以至于vh的取值改变

// 正常模式下
100vh = document.documentElement.clientHeight;// 安卓端弹出虚拟键盘情况下100vh = document.documentElement.clientHeight - 虚拟键盘的高度;

这种情况导致了在虚拟键弹出的时候，页面中使用vh定高的元素的大小被压缩，造成布局错位以及文字溢出。

暂未找到有效的前端解决方法。

将带有输入框的页面元素使用px进行布局暂时修复。

记响应式布局vh/vw单位在安卓端微信浏览器以及UC浏览器的坑相关推荐

vw 前端_一行css代码轻松实现前端响应式布局（vw+rem）
大家知道rem可以用来做响应式布局,只是html元素上的font-size样式需要根据屏幕宽度来指定. 之前有用@media媒体查询,根据各种屏幕宽度写html的样式,也用过类似lib-flexibl ...
移动端开发、各种兼容问题、响应式布局开发、移动端和PC端开发的不同
文章目录一.移动端开发二.移动端开发和PC端开发的不同 1.@1 响应式布局开发 2.关于CSS3的兼容 3.关于ES6+的兼容 4.还有一些移动端独有的兼容问题: 三.DPR:屏幕像素密度比「高 ...
响应式布局之微软商城部分开发
响应式布局之微软商城部分开发今天,博主带来的分享是响应式布局之微软商城的开发,,页面比较庞大,博主仅仅开发了一部分!我们先来贴下效果吧! pc端,pad端比较像,就是间距发生变化的问题,因此博主这里 ...
html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
一.前言根据前面写的你不知道的css单位,进行了一种响应式布局的思考. 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 单位可参考 : 你不知道 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
在前端开发过程中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询.百分比.rem.和vw /vh,本文主要分析px在移动端布局中的不足,以及几种不同的自适应解决方案一 ...
响应式布局——视口viewport和常用单位
目录导读视口 viewport viewport 的缩放与平移 viewport的DOM API 移动端的 viewport 窄屏设备的问题放大的viewport 可定制的viewport Vi ...

记响应式布局vh/vw单位在安卓端微信浏览器以及UC浏览器的坑

记响应式布局vh/vw单位在安卓端微信浏览器以及UC浏览器的坑相关推荐

最新文章

热门文章