web前端面试题-移动开发篇(持续更新...)

继续分享我整理了5年的面试题

html:https://segmentfault.com/a/1190000020888959

css:https://segmentfault.com/a/1190000020898762

javascript:https://segmentfault.com/a/1190000020933141

jquery:https://segmentfault.com/a/1190000020938095

另外附上课程链接:https://www.3mooc.com/front/l...

1,ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

2,webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

3,webkit表单输入框placeholder的文字能换行么

ios可以,android不行~
在textarea标签下都可以换行~

4,禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

5,禁止ios和android用户选中文字

.css{-webkit-user-select:none}

6,打电话发短信写邮件怎么实现

打电话:    打电话给:0755-10086
发短信,winphone系统无效    发短信给: 10086
写邮件:    peun@foxmail.com

7,模拟按钮hover效果

移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活移动端css的active效果。

1,直接在body上添加ontouchstart,同样可激活移动端css的active效果,比较推荐这种方式(兼容性ios5+、部分android 4+、winphone 8)
2,要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名

8,audio元素和video元素在ios和andriod中无法自动播放

应对方案:触屏即播

 $('html').one('touchstart',function(){
   audio.play()
 })

9,消除transition闪屏

网络都是这么写的,但我并没有测试出来

.css{
    /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
    -webkit-backface-visibility: hidden;
}

10,开启硬件加速

1,解决页面闪白
2,保证动画流畅
.css {
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
}

11,取消input在ios下,输入的时候英文首字母的默认大写

12,android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

13,H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

14,忽略将页面中的数字识别为电话号码

15,忽略Android平台中对邮箱地址的识别

你可能感兴趣的