android界面布局错位,IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):

明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

明明弹框是居中显示的,却向上偏移了很多,导致下面很多空白

明明是固定浮动在某个位置,却点不到它

1. Android 与 IOS 的差异

在 Android 中,软键盘的弹起与收缩会触发 window 对象的 resize 事件,而 IOS 不会

微信 IOS 浏览器底部导航条的显示与隐藏会触发 window 对象的 resize 事件,而 Android 中没有底部导航条

2. IOS 里的一些特性

为了达到极致的体验,IOS 浏览器很多特性是不遵循 W3C 规范的

软键盘的弹起与收缩不会触发 window 对象的 resize 事件

软键盘收缩后,固定定位的元素处于错位状态,需要滑动页面后才能刷新页面恢复到正常状态

3. 具体情况分析

不管是 IOS 浏览器软键盘的拉起与收缩,还是微信 IOS 浏览器底部导航条的显示与隐藏,都是改变的 window 窗体的大小。

微信 IOS 浏览器底部导航条的显示与隐藏跟软键盘的拉起与收缩是差不多的,但微信 IOS 浏览器底部导航条还有一个很大的特点:

在单页面应用(SPA)中,当路由发生变化时,底部导航条会一下子就显示,而这很难确定是先渲染了页面还是先显示了底部导航条,

这也很容易导致元素布局错位。

4. 怎么解决

4.1 监听键盘弹起与收缩,自动做一些操作

新建 watch-keyboard.js 脚本,引入到页面中。

当页面中键盘弹起时,body 会有 keyboard-active class,可以根据这个隐藏一些元素。

import {isIos} from '../utils';

import debounce from 'lodash/debounce';

// 初始高度

const winHeight = window.innerHeight;

// 判断是不是弹起了软键盘

const judgeDistance = 200;

if (!isIos) {

window.addEventListener(

'resize',

debounce(() => {

if (window.innerHeight < winHeight - judgeDistance) {

// 键盘弹起

document.body.classList.add('keyboard-active');

} else {

document.body.classList.remove('keyboard-active');

}

}, 300),

!1

);

}

else {

// IOS 软键盘的弹起与收缩不会触发 `window` 对象的 `resize` 事件,用定时器实现

// 保证能够滚动

document.body.style.minHeight = (winHeight + 2) + 'px';

// 上两次高度记录

let secondLastWinHeight = winHeight;

// 上一次高度记录

let lastWinHeight = winHeight;

setInterval(() => {

const newWinHeight = window.innerHeight;

// 变化结束

if (secondLastWinHeight !== lastWinHeight && lastWinHeight === newWinHeight) {

if (newWinHeight < winHeight - judgeDistance) {

// 键盘弹起

document.body.classList.add('keyboard-active');

} else {

document.body.classList.remove('keyboard-active');

// window 需要滚动一下,让页面刷新一下,否则弹框会出现错位的问题

window.scrollTo(0, window.scrollY ? window.scrollY - 1 : 1);

}

}

secondLastWinHeight = lastWinHeight;

lastWinHeight = newWinHeight;

}, 300); // 可以根据需要调整间隔时间(越小越精确)

}

4.2 监听窗体大小变化,执行一个回调,做更多操作

当软键盘弹起时,又点击了一个按钮,然后显示弹框(如:从底部向上弹出)的时候,这个时候就需要等待软键盘收起之后,IOS 刷新屏幕之后,再显示弹框。

新建 wait-for-stable-win-height.js 脚本,引入到页面中。

import { isIos } from '../utils';

/**

* 等待 window 高度不变了之后执行一个回调函数

*

* @param onComplete 完成的回调

* @param delay 延迟多少时间再判断

* @param interval 定时器间隔时间

*/

export default ({ onComplete, delay = 200, interval = 50 }) => {

setTimeout(() => {

let winHeight = window.innerHeight;

const timer = setInterval(() => {

const newWinHeight = window.innerHeight;

if (winHeight === newWinHeight) {

clearInterval(timer);

if (onComplete) {

if (!isIos) {

setTimeout(() => {

onComplete();

}, 100);

return;

}

// window 需要滚动一下,让页面刷新一下,否则弹框会出现错位的问题

window.scrollTo(0, window.scrollY ? window.scrollY - 1 : 1);

setTimeout(() => {

onComplete();

}, 200);

}

} else {

winHeight = newWinHeight;

}

}, interval);

}, delay);

};

后续

版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

做进度条 根据自己的数据显示进度

做了很多种方法 1&#xff1a; 线程 thread的方法 2&#xff1a; backGroundWorker的方法 3&#xff1a; 自定义线程类 4&#xff1a; 做一个进度条的窗体 通过自定义设置做&#xff08;最方便快捷&#xff09; public partial class waitingProcessbar : Form{public waitin…

视图和模型变换

视图变换&#xff0c;是指变换照相机的位置&#xff0c;角度。 模型变换&#xff0c;是指变换被照物体的位置&#xff0c;角度。 这两个变换&#xff0c;都会影响最终图形中&#xff0c;物体的位置&#xff0c;角度。而这两个变换&#xff0c;可以达到相同的效果。比如&#x…

phoenix的元数据一般存在哪里_Phoenix的一些问题

date: 2020-09-10 13:50:00updated: 2020-09-14 16:30:001. Phoenix索引全局索引&#xff1a;适合读多写少的场景。写数据时因为索引表分布在不同数据节点&#xff0c;跨节点数据传输带来巨大的性能消耗。全局索引必须是查询语句中所有列都包含在全局索引中&#xff0c;它才会生…

鸿蒙os全面升级,华为突然宣布,鸿蒙OS正式版6月底全面升级,幸福来得太突然...

原标题&#xff1a;华为突然宣布&#xff0c;鸿蒙OS正式版6月底全面升级&#xff0c;幸福来得太突然摘要&#xff1a;早在今年2月华为Mate X2折叠屏新品发布会上&#xff0c;余承东曾表示&#xff0c;鸿蒙OS正式版将于今年4月份全面上线。或许是因为华为宣布卖车分散了很多的精…

5-python学习——条件语句

5-python学习——条件语句 5-python学习——条件语句 条件语句if else形式if else条件语句说明 测试一下编程语言一般都由这么几个部分组成 变量条件分支语句循环语句函数这里要说的就是条件分支语句。 python的条件语句和shell脚本的非常像&#xff0c;也就是if else if else这…

eclipse启动失败:An internal error occurred during: reload maven project

2019独角兽企业重金招聘Python工程师标准>>> 1.找到workspace文件夹下的/.metadata文件夹&#xff0c;将其删除掉&#xff0c;然后在讲项目重新导入进去eclipse中。但是这个有一点不好的地方&#xff0c;之前对eclipse所做的配置也会恢复为默认配置 2.在.metadata下…

Quartz2D知识点聚合案例

Quartz2D知识点聚合 基本 //画图片UIImage *image [UIImage imageNamed:"阿狸头像"];[image drawInRect:rect];//字体NSString *title "标题";NSMutableDictionary *atr [NSMutableDictionary dictionary];atr[NSFontAttributeName] [UIFont systemFon…

skt7850鸿蒙策略,lol 英雄联盟 SKT状态回暖轻取外卡,SUP难挡Faker

MSI 第四日 SUP vs SKT双方bpBAN LISTBAN&#xff1a;SUP:流浪 牛头 豹女SKT&#xff1a;巴德 妖姬 鱼人PICKSUP:大树 男枪 冰女 卢锡安 锤石SKT&#xff1a;艾克 千珏 沙皇 EZ 布隆比赛开始&#xff0c;双方正常对线开局。前期下路锤石多次勾中ez&#xff0c;男枪也来逼出EZ布…

spring集成struts2

Struts2前身是WebWork&#xff0c;核心并没有改变&#xff0c;其实就是把WebWork改名为struts2&#xff0c;与Struts1一点关系没有。 Struts2中通过ObjectFactory接口实现创建及获取Action实例&#xff0c;类似于Spring的IoC容器&#xff0c;所以Action实例可以由ObjectFactory…

slqite3库查询数据处理方式_SQLite3命令操作大全

SQLite3命令操作大全SQLite库包含一个名字叫做sqlite3的命令行,它可以让用户手工输入并执行面向SQLite数据库的SQL命令。本文档提供一个样使用sqlite3的简要说明.一.qlite3一些常用Sql语句操作创建表: create table 表名(元素名 类型,…);删除表: drop …

Android学习之查看网络图片

在这里小编学习了查看网络图片的小案例,: 初始界面: 点击浏览后,效果如下: 需要注意的是 该案例需要获取联网权限,即: <uses-permission android:name"android.permission.INTERNET"/>具体步骤如下: 1.定义并初始化控件: private EditText etImageUrl;private …

AutoLayout 浅析动画

1.AutoLayout相关的几个易混淆的方法 setNeedsLayout layoutIfNeeded layoutSubViews setNeedsUpdateConstraints updateConstraitsIfNeed updateConstraints 子视图在界面上的显示大概经过了&#xff1a;更新约束-通过约束依赖关系得到具体的frame-展示到界面。上面几个是和au…

vue 转为静态html,Vue CLI 3使用:HTML和静态资源(五)

HTMLpublic/index.html 文件是一个会被 html-webpack-plugin 处理的模板。构建中&#xff0c;各种资源路径会被注入解析。可以使用 lodash template 语法插入内容。用来做不转义插值&#xff1b;用来做 HTML 转义插值&#xff1b;用来描述 JavaScript 流程控制。除了被 html-we…

animate css3 应用的借鉴,一个同事写的JS

$("#banner").height($(window).height()-125);$(window).resize(function(){ $("#banner").height($(window).height()-125);}); //首页幻灯$(".indeximgs:first").show();var i0;$(".leftbut").click(function(){$(".indexim…

从html导出带样式的excel,Jquery导出带样式的Excel

工作中做导出的时候&#xff0c;需要导出自定义的表格或嫌弃导出的Excel格式太难看了。需要设置颜色、字号大小、加粗、合并单元格等等。特性&#xff1a;支持过滤 某个位置支持过滤 img 标签支持过滤 a 标签支持过滤 input 标签支持包含 行内样式。HTML页面&#xff1a;HTML页…

elementui from表单提交_elementui upload与form一起提交

学生基本信息管理操作中&#xff0c;有照片&#xff0c;可以上传也可以不上传&#xff0c;在表单界面可以修改照片&#xff0c;el-upload控件可以带额外参数提交&#xff0c;jquery的post模拟不了成表单带文件提交的方式&#xff0c;因此&#xff0c;判断如果有上传文件时&…

information_schema.character_sets 学习

information_schema.character_sets 表用于查看字符集的详细信息 1、character_sets 常用列说明&#xff1a; 1、character_set_name&#xff1a;    字符集名 2、default_collate_name&#xff1a;    默认排序规则   3、description&#xff1a;         …

asp.net mvc 用Redis实现分布式集群共享Session。

1、这两天研究Redis搞分布式session问题&#xff0c;网上找的资料都是用ServiceStack.Redis来实现的&#xff0c;但是在做性能测试的时候发现最新的v4版本有限制每小时候最多请求6000次&#xff0c;因为官网开始商业化要收费了&#xff0c;好坑爹的说&#xff0c;还好我前期弄了…

如何用计算机求和,求和计算器

求和计算器您可以使用此求和计算器快速计算预定范围内某个表达式的序列之和。如何使用求和计算器输入总和的表达式输入上限和下限提供表达式中使用的变量的详细信息单击“计算”按钮生成结果。求和Σ符号计算器k ∑n 0变量:nixyzabc 103740支持的运算符常量和函数算术运算符加“…

Zookeeper概述、特点、数据模型

Zookeeper1.Zookeeper概述Zookeeper是一个工具&#xff0c;可以实现集群中的分布式协调服务。所谓的分布式协调服务&#xff0c;就是在集群的节点中进行可靠的消息传递&#xff0c;来协调集群的工作。Zookeeper之所以能够实现分布式协调服务&#xff0c;靠的就是它能够保证分布…