ios 下 new Date('2020-03-11 00:00:00')
不生效,需要对日期进行 date.replace(/-/g, '/')
处理。
ios 下 beforeunload
事件废弃了,需要使用 pagehide
事件替代。
// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// ...
focus () {
const u = navigator.userAgent;
const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; // 判断机型,android终端
if (isAndroid) {
const that = this
const originalHeight = document.documentElement.clientHeight || document.body.clientHeight
window.onresize = function () {
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
if (resizeHeight - 0 < originalHeight - 0) {
that.$refs.input.style.bottom = `-${
originalHeight - resizeHeight}px`
} else {
that.$refs.input.style.bottom = `0px`
}
}
}
},
因为是点击input后触发的问题,所以应该在input聚焦时处理,也就是放在focus事件中改变页面的top值。
下面是解决该问题的大概的模板:
// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @focus="focus" />
// ...
focus () {
const u = navigator.userAgent;
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // 判断机型,ios终端
if (isiOS) {
document.body.addEventListener("focusin", () => {
// 软键盘弹出的事件处理
this.isShowFooterBar = false;
});
document.body.addEventListener("focusout", () => {
// 软键盘收起的事件处理
this.isShowFooterBar = true
});
}
}
【拓展】
ios:focusin
和 focusout
事件支持冒泡,分别对应 focus
和 blur
事件。
上面的方法中,之所以使用 focusin 和 focusout 的原因是:假设有多个输入框需要处理,这样就可以使用事件代理来处理多个输入框存在的情况了。
// vue
<input ref="input" v-model="form.name" placeholder="请输入您的名字" @input="inputVal" @blur.prevent="blur" />
// ...
blur () {
window.scrollTo(0, 0)
}
ios11之后,有些情况使用 input 事件 ios 自带的输入法,当选择拼音输入时会自动输入多个字符,这是因为有时 ios 对 input 事件不兼容导致的,使用 change 事件即可解决这个问题。
ios 收起输入法时会失去焦点,触发 change 事件,但是 Android 收起输入法时并不会失去焦点,所以可以通过判断 UA(navigator.userAgent) 的方式来针对不同系统使用不同的事件。
input:focus{
outline:none} // 去除外边框
input:{
-webkit-appearance: none;}
// android 中这样实现
input {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
// ios 中应当将上述样式中的属性 -webkit-user-select 的值由 none 改为 auto
input {
-webkit-user-select: auto;
}
input::-webkit-input-placeholder {
color: #bbb;
font-size: 0.3rem;
line-height: normal;
}
// 给你 input 去除 line-height 属性,然后添加下面的样式
input::-webkit-input-placeholder {
line-height: normal;
}
对于一般PC浏览器以及iOS设备的浏览器表现就是我们想要的居中效果,但是大部分 Android 设备的浏览器文字都会稍微向上偏离。
结合行高、对齐的关系 和 伪元素,可以给当前元素添加以下样式来尝试解决该问题:
&::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-top: 1px;
}
input, textarea {
border: 0;
-webkit-appearance: none;
}
img {
pointer-events: none; }
给其父元素添加 padding-top
,代替该元素的 margin-top
。
给该元素设置:
overflow-x: hidden;
给该元素设置:
position: fixed;
left: 0;
top: 0;
此方案亦可解决:H5 嵌入式开发时,让页面适配端上提供的组件。
iOS 底部有个小横条,如何保证内容不被横条遮挡呢?最好的办法就是用 CSS 来做下兼容。
第一步:需要在 index.html 文件中的 <mate> 标签中增设 viewport-fit
属性来改变网页在可视窗口的布局方式
viewport-fit 属性是 iOS11 新增的特性。苹果公司为了适配 iPhoneX 对现有 viewport meta 标签新增加的一个扩展,用于设置网页在可视窗口的布局方式。
viewport-fit 可设置三个值:
object-fit: contain;
)。object-fit: cover;
)。<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
第二步:在需要兼容的页面中用 env()
和 constant()
这两个 CSS 函数来设定安全区域以及边界的距离。
env() 和 constant() 是 iOS11 新增的两个 CSS 特性,用来设定安全区域以及边界的距离。
env() 和 constant() 可设置四个值:
.box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 3.87rem;
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS>=11.2 */
}
【注意】constant 和 env 的先后顺序不能换。
【参考文献】网页适配 iPhoneX,就是这么简单
这是我遇到的一个问题,当时去掉 font-family
就好了。
因为,iOS 自带的回弹特效不会触发 scroll 事件,也就导致 scrollTop 的值为 undefined。需要做一个兼容:默认是 0 就好了——let scrollTop = e.target.scrollTop || 0
。
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
文章浏览阅读3.7k次,点赞3次,收藏7次。我们知道最早监听网络变化,是通过广播,静态或动态注册广播,处理"android.net.conn.CONNECTIVITY_CHANGE"这个action就可以了intent就可以了。我们发现"android.net.conn.CONNECTIVITY_CHANGE"这个action已经加了注解@Deprecated,不推荐使用了。根据注释说明,7.0及以上静态注册广播(manifest中)..._android.net.conn.connectivity_change
文章浏览阅读291次。开个坑_bytetrack+yolov5 c++
文章浏览阅读4.8k次,点赞12次,收藏39次。fatal error: filesystem: 没有那个文件或目录_fatal error: filesystem: no such file or directory
文章浏览阅读1k次。题库来源:安全生产模拟考试一点通公众号小程序2020起重机械指挥作业考试题库及起重机械指挥模拟考试系统,包含起重机械指挥作业考试题库答案解析及起重机械指挥模拟考试系统练习。由安全生产模拟考试一点通公众号结合国家起重机械指挥考试最新大纲及起重机械指挥考试真题出具,有助于起重机械指挥考试试题考前练习。1、【判断题】指挥人员负责对可能出现的事故采取必要的防范措施。(√)2、【判断题】手势信号包括通用手势信号、专用手势信号和其它指挥信号。()(×)3、【判断题】吊装用的短环链,不..._换算英制直径5分钢丝绳为公制多少毫米?()。
文章浏览阅读1.7k次,点赞2次,收藏25次。本文我们将介绍几种数据库和数据挖掘技术,帮助临床研究人员更好地理解和应用数据库技术。数据挖掘技术可以从大量数据中寻找潜在有价值的信息,主要分为数据准备、数据挖掘、以及结果表达和分析。数据库技术是研究、管理和应用数据库的一门软件科学。通过研究数据库的结构、存储、设计、管理和应用的基本理论和实现方法,对数据库中的数据进行处理和分析。_dryad数据库
文章浏览阅读1.8k次。screw_java实现数据库表文档
文章浏览阅读3.1k次,点赞3次,收藏13次。SpringBoot整合Elastic-job实现【基本整合】:原理参考:Elastic-Job原理(1)引用pom依赖:<dependency> <groupId>com.dangdang</groupId> <artifactId>elastic-job-lite-core</artifactId> <..._springboot + elasticjob
文章浏览阅读791次。AttenSleep 基于注意力的深度学习架构从单通道EEG信号中进行睡眠阶段分类从基于多分辨率卷积神经网络( MRCNN )和自适应特征重标定( AFR )的特征提取模块入手。MRCNN可以提取低频和高频特征,而AFR可以通过建模特征之间的相互依赖关系来提高提取特征的质量。第二个模块是时间上下文编码器( TCE ),它利用多头注意力机制来捕获提取特征之间的时间依赖关系。特别地,多头注意力利用因果卷积对输入特征中的时间关系进行建模。使用三个公共数据集来评估提出的AttnSleep模型的性能。_an attention-based deep learning approach for sleep stage classification wit
文章浏览阅读71次。在了解MyEclipse使用技巧之前我们来看看MyEclipse是什么呢?简单而言,MyEclipse是Eclipse的插件,也是一款功能强大的J2EE集成开发环境,支持代码编写、配置、测试以及除错。下面让我们看看MyEclipse使用技巧的具体内容。MyEclipse使用技巧第一步: 取消自动validationvalidation有一堆,什么xml、jsp、jsf..._myeclipse是什么
文章浏览阅读8.9k次。//出现的次数function times(arr){var m=0,times=0;//m是数组中的元素,times用来统计出现的次数// for循环遍历arr数组for(var i=0;iif(arr[i]==m){times++;//数组中有相同值就加1}}return times;console.log(times);//这是打印出的出现的次数}times([0, 1, 2, 0, 1, ..._c语言统计数组中每个数字出现的次数
文章浏览阅读2.5k次,点赞5次,收藏14次。Jmeter连接InfluxDB2.0.4问题描述:在用Jmeter+InfluxDB构建监控时,因为docker构建的InfluxDB的版本是2.0.4,按照网上的教程进行后端监听器的填写,但是一直出现错误提示401等问题。网上的教程大多是1.X版本的,怀疑是数据库版本不一致导致的数据无法写入,通过调研,问题已解决。以下为配置方法。一、InfluxDB搭建完成后,查看Organization和Bucket名称,这里是ORZ_test和bucket_nameOrganization在这里我的理解_influxdborganization jmeter
文章浏览阅读1.6k次。目录 目录 1、第三方支付概述 2、第三方支付起源 PayPal 支付宝 3、牌照发放 4、支付牌照 5、第三方支付参与者 6、第三方支付行业监管 监管意图对第三方支付可能产生的影响..._第三方支付本行对本行的费用