移动端知识点部分总结
source link: https://segmentfault.com/a/1190000007839280
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
最近写了些hybird
应用嵌入的web
页面,遇到的一些问题,稍稍的总结下:
IOS和安卓不同机型上默认line-height不一致
<p class="p1">测试1</p>
<p class="p2">测试2</p>
.p2 {
font-size: 0.14rem;
margin-top: 0.1rem;
}
由于2种机型的默认line-height
不一致,这和字体、浏览器的布局模型、操作系统的字体渲染引擎,因此遇到这种情况的时候会选择手动的设置line-height
的值,然后再通过margin
或者padding
去控制2个p
标签之间的间距。
.p2 {
font-size: 0.14rem;
margin-top: 0.12rem;
height: 0.14rem;
line-height: 0.14rem;
}
IOS下Input元素focus后无法唤起键盘
有个需求就是一进入到页面,用户不做任何操作,input
标签就被获取焦点,同时键盘被呼出。
获取焦点很容易做到,直接通过调用原生的focus()
事件就行了。但是不能直接唤起键盘。
这是我关于这个问题的描述: IOS下Input元素focus后无法唤起键盘
文档上说明的很清楚了。native
上keyboardDisplayRequiresUserAction
为true
时。必须要通过用户点击屏幕去主动触发键盘的唤起。
这个时候有2种方案了:
直接点击
input
标签,唤起键盘通过点击屏幕的其他区域,然后触发
input
的focus
事件,唤起键盘
这个时候我是选择的第二种方案:
进入页面后,给页面加一层mask
,在mask
绑定点击事件,通过这个点击事件去触发键盘的唤起.
let maskEle = document.querySelector('.mask'),
inputEle = document.querySelector('.input');
maskEle.addEventListener('click', () => {
inputEle.focus()
//然后隐藏maskEle
});
安卓机下4.x
的版本通过input
的focus
事件可以直接唤起键盘,不过5.0
后也需要用户去主动的唤起键盘.
dialog
组件:
.dialog {
position: fixed;
z-index: 999;
}
如果页面比较长,滑动页面的时候,dialog
组件不动,但是dialog
下部的可能会滑动的页面会滑动.
我的处理方法就是在dialog
的mask
上绑定:
document.querySelector('.dialog-mask').addEventListener('touchmove', e => e.preventDefault());
另外还可以通过主动设置底部元素的overflow
属性来控制是否能滑动.
input标签监听input事件,输入中文的时候出现英文字母也会被输入的情况
let inputEle = document.querySelector('.input');
//限制空白符的输入
inputEle.addEventListener('input', (e) => {
let target = e.target;
target.value = target.value.replace(/\s/g, '');
});
这个时候输入中文的时候,英文字母也会被输入.
通过改变input
监听事件的类型:
inputEle.addEventListener('keyup', (e) => {
let target = e.target;
target.value = target.value.replace(/\s/g, '');
})
这样就会避免输入中文的时候连带字母也被输入进去了。另外一种解决方案,利用compositionstart
和compositionend
属性,具体解决过程请戳我
如果想要限制input
标签输入的位数,尽量使用input
的maxlength
属性.
不过在移动端, type="number"
的maxlength
不起作用。
这个时候可以使用input
的pattern
来达到这一效果
<input type="text" pattern="\d*" maxlength="11">
不过pattern
这个属性在移动端,特别是安卓机下的支持度不是很好.(查看兼容性请戳我)
安卓机下背景色从border-radius溢出
在华为的某款机型下,安卓版本为4.2.2。设置:
.circle {
width: 0.04rem;
height: 0.04rem;
border-radius: 100%;
background-color: #333;
}
这个时候,并没有表现为正常的黑色圆形,而是一个正方形。
具体的解决方案见.一丝的blog
伪类选择器:last-child
和:last-of-type
的区别
:last-child
:first-child
:nth-child
3者都是从结构上来说的
<div class="parent">
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
</div>
h1:first-child
可以匹配到第一个h1h2:first-child
匹配不到元素h3:first-child
匹配不到元素h4:first-child
匹配不到元素h4:last-child
匹配到最后一个元素
h1:first-of-type
可以匹配到第一个h1h2:first-of-type
匹配到h2h3:first-of-type
匹配到h3h4:first-of-type
匹配到h4h4:last-of-type
匹配到最后一个元素
first-child
和first-of-type
的区别就是前者是匹配结构上的第一个元素,而后者是匹配子元素中同一类型元素的第一个元素.
nth-child
和nth-of-type
last-child
和last-of-type
input获取焦点时,部分机型软键盘弹出后会遮挡input标签
测试机型:
华为,oppo,小米安卓4.x的机型,页面不发生滚动,软键盘弹出都会遮挡input标签
iphone 5+ 自带的输入法软键盘弹出不会遮挡,页面会发生滚动
iphone 5+ 讯飞输入法,搜狗(页面发生滚动,但是软键盘有一段高出的部分遮挡了input标签)
软键盘弹出后会触发resize
事件,监听resize
事件完成页面的自动滚动.
IOS下第三方输入高出部分遮挡input标签
暂时还未找到解决方案.
移动端1px问题
个人推荐的方案(less
):
.border-new-1px(@color, @radius, @style) {
position: relative;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1px @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
}
@media (-webkit-min-device-pixel-ratio: 3) {
&::before, &::after {
width: 300%;
height: 300%;
-webkit-transform: scale(.33);
-webkit-transform-origin: 0 0;
transform: scale(.33);
border-radius: @radius * 3;
}
&::before {
-webkit-transform-origin: left bottom;
}
}
@media (-webkit-min-device-pixel-ratio: 2) {
&::after, &::before {
width: 200%;
height: 200%;
border-radius: @radius * 2;
-webkit-transform: scale(.5);
transform: scale(.5);
}
}
}
通过去检测device-pixel-ratio
属性(物理像素
和css像素
的比),例如当device-pixel-ratio
为3
时,会将元素的长度和宽度扩大3倍,然后通过transform: scale(.33)
进行缩小。
另外还有一种 @Humphry 提供的方案也挺好用的:
使用svg
作为background-image
来实现, 不过最好还是使用预编译封装成函数, 这样写起来的效率也很高 具体方案请戳我.
safari下时间转化格式的问题
在safari
下有这样一个问题:
打印时间
alert(new Date('2012-12-12'));
//在andriod机器下正常显示,在ios机器下Invalid Date
//当时看到后就是一脸黑人❓
在前后端的时间交互过程中我觉得统一转化为时间戳还是靠谱一点。避免不同浏览器对不同时间的解析方式不同而出现兼容性的问题
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK