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">
文章浏览阅读2.2k次。今天在开发的过程中遇到了一个Redis的问题: 当你在redis中插入一个key值,并且设置了对应过期时间. 当过期时间还没到的时候重新 更新 key值会导致 过期时间被刷新, 针对这个问题: 我查看了下redis的官方文档, 他们是这么解释的:The timeout will only be cleared by commands that delete or overwrite the con..._更新redis的值过期时间刷新了
文章浏览阅读504次。一、apply介绍1、apply是前端javascript方法默认自带的方法,这要的用法是替换掉当前执行的方法的this对象,从而实现继承,或者修改方法内部使用到this对象;这次先说继承:例如:首先,在test方法里边声明两个方法,add,sub:function test(){this.add=function(a,b){return a_es14 特性
文章浏览阅读992次,点赞10次,收藏5次。目录前言2021-10-8题目合并两个有序数组解题思路代码其他思路前言因为最近参加了csdn的一个大博主的活动,坚持每天写写力扣算法题一个月,我觉得这个活动很有意义,因为每天能写一道算法题很容易,但是坚持一周呢?一个月呢?一年呢?能坚持的人少之又少,但是如果坚持每天写几道算法题并坚持很久,也是会有很大的收获的,为了自己的目标,我们冲就完事!!!顺便给大佬谢谢这个大佬提供这个机会!!大家也可以去大佬的博客看看干货!!!向大佬学习!!2021-10.._一个月学算法
文章浏览阅读3.4w次,点赞8次,收藏52次。adb connect命令利用TCP/IP协议来连接。adb连接设备有两种方式,本文尝试通过Wi-Fi无线连接设备进行调试。_adb connect
文章浏览阅读404次。//for imports check on bottom of this code blockpublic class HomeProfileActivity extends AppCompatActivity {//Button camerapublic static final String TAG = HomeProfileActivity.class.getSimpleName();pu..._clipdata geturi()==null
文章浏览阅读8.1k次,点赞12次,收藏56次。1.首先随意创建几个线程,如下图:2.然后就要思考了,怎么样实现如果其中一个线程死掉了,就不喂狗得以让系统重启? 其实,我们可以反过来想一下,什么情况下才喂狗得以让系统正常运行?答案是,所有线程都活着的时候。 那么我们就让所有线程每隔一段时间上报一次“我还活着”事件给监视程序,当监视程序发现其中一个线程在这段时间内没有上报“我还活着”事件时就停止_freertos实验_独立看门狗监视多线程
文章浏览阅读1.1k次。Android TV上的焦点凸显特效相信大家都看到过,那么我们就来实现它吧,首先上张效果图。先说一下实现原理,主要通过重写RelativeLayout实现item,之后在其中加入scalanimation动画效果。刚开始处理时,还是发现了一些问题,比如item放大后会被其他item遮挡,如何添加选中边框等等,以及动画的实现等等。下面放上实现细节。首先是item的代码_android app控制电视焦点变化
文章浏览阅读681次,点赞2次,收藏4次。问题描述我用 Pycharm 在调用 pyside2 的 QIcon 读入本地图片文件时,将读取图片的代码移到了程序的最开头,结果程序无法运行。报错如下:Process finished with exit code -1073740791 (0xC0000409)因为没有任何有用的提示,只能拿这个错误码上网搜。根据网友说,这个报错是显存不足的问题。可是我只是小小地加载了个资源,不至于显存不足。所以具体问题还是要具体分析。最后,打开命令行窗口的方法帮助我解决了问题。解决方法1. 打开 Pycha_eclipse exit code =-1073740791
文章浏览阅读6.5k次。关键公式:=INDIRECT("G"&ROW())="功能完成" 效果图: _wps表格 根据数值改变单元格背景色
文章浏览阅读1.2k次,点赞3次,收藏9次。作者:Shivam Bansal;翻译:陈之炎;校对:丁楠雅;本文约5600字,建议阅读30+分钟。本文中,我们将探讨PyTorch的全部内容。我们将不止学习理论,还包括..._self.conv1 = nn.conv2d[3, 16, 3]
文章浏览阅读6.1k次,点赞2次,收藏18次。getprop persist.sys.hwconfig.stb_id —盒子ID信息 persist.sys.hwconfig.stb_id getprop prop.ots.virtual_ip —虚拟IP设置 android:sharedUserId=”android.uid.system” —应用作系统签名 screencap -p /mn..._机顶盒ttl命令大全
文章浏览阅读818次。环境:Apache POI 3.17;HSSFSheet;目的:对Excel表格中同一列,如果连续的两个或两个以上单元格的内容相同,则对这些单元格进行合并。实现代码:/*** 合并指定Excel sheet页、指定列中连续相同内容的单元格** @param sheet Excel sheet* @param column 指定列*/public static void mergeSpecifie..._poi对上下相同的文字进行合并