移动端常见bug(2)
来源:互联网 发布:网易足球数据 编辑:程序博客网 时间:2024/06/05 11:17
1、通过transform进行skew变形,rotate旋转会造成出现锯齿现象
可以设置如下:
?
1
2
3
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)
2、移动端点击300ms延迟
300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。
推荐两个js,一个是fastclick,一个是tap.js
关于300ms延迟,具体请看:http://thx.github.io/mobile/300ms-click-delay/
3、移动端点透问题
案例如下:
?
1
2
3
<
div
id
=
"haorooms"
>点头事件测试</
div
>
<
a
href
=
"www.jb51.net"
>www.jb51.net</
a
>
div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接,我们给div绑定tap事件:
?
1
2
3
$(
'#haorooms'
).on(
'tap'
,
function
(){
$(
'#haorooms'
).hide();
});
我们点击蒙层时 div正常消失,但是当我们在a标签上点击蒙层时,发现a链接被触发,这就是所谓的点透事件。
原因:
touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时 click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。
解决:
(1)尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
(2)用fastclick,https://github.com/ftlabs/fastclick
(3)用preventDefault阻止a标签的click
(4)延迟一定的时间(300ms+)来处理事件 (不推荐)
(5)以上一般都能解决,实在不行就换成click事件。
下面介绍一下touchend事件,如下:
?
1
2
3
4
$(
"#haorooms"
).on(
"touchend"
,
function
(event) {
event.preventDefault();
});
4、消除 IE10 里面的那个叉号
?
1
input:-ms-clear{
display
:
none
;}
5、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决 iOS 上的问题,但桌面版 Safari 的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。
1
2
3
-webkit-text-size-adjust:
100%
;
-ms-text-size-adjust:
100%
;
text-size-adjust:
100%
;
6、 IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!
解决办法:
可以用html5的oninput事件去代替keyup
?
1
2
3
4
5
6
<input type=
"text"
id=
"testInput"
>
<script type=
"text/javascript"
>
document.getElementById(
'testInput'
).addEventListener(
'input'
,
function
(e){
var
value = e.target.value;
});
</script>
然后就达到类似keyup的效果!
7、h5网站input 设置为type=number的问题
h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了。另外一个是form提交的时候,默认给取整了。三是部分安卓手机出现样式问题。
问题一解决,我目前用的是js。如下
?
1
2
3
4
5
6
7
<input type=
"number"
oninput=
"checkTextLength(this ,10)"
>
function
checkTextLength(obj, length) {
if
(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
问题二,是因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数,写法如下:
?
1
<
input
type
=
"number"
step
=
"0.01"
/>
关于step,我在这里做简单的介绍,input 中type=number,一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01。
假如step和min一起使用,那么数值必须在min和max之间。
看下面的例子:
?
1
<
input
type
=
"number"
step
=
"3.1"
min
=
"1"
/>
输入框可以输入哪些数字?
首先,最小值是1,那么可以输入1.0,第二个是可以输入(1+3.1)那就是4.1,以此类推,每次点击上下箭头都会增加或者减少3.1,输入其他数字无效。这就是step的简单介绍。
问题三,去除input默认样式
?
1
2
3
4
5
6
7
8
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance:
none
;
margin
:
0
;
}
8、ios 设置input 按钮样式会被默认样式覆盖
解决方式如下:
?
1
2
3
4
5
input,
textarea {
border: 0;
-webkit-appearance: none;
}
设置默认样式为none
9、IOS键盘字母输入,默认首字母大写
解决方案,设置如下属性
?
1
<
input
type
=
"text"
autocapitalize
=
"off"
/>
10、select 下拉选择设置右对齐
设置如下:
?
1
2
3
select option {
direction: rtl;
}