乐趣区

web前端面试题移动开发篇持续更新

jiezi

继续分享我整理了 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，打电话发短信写邮件怎么实现 

 打电话：<a href="tel:0755-10086"> 打电话给:0755-10086</a>
发短信，winphone 系统无效    <a href="sms:10086"> 发短信给: 10086</a>
写邮件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>

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 下，输入的时候英文首字母的默认大写 

<input autocapitalize="off" autocorrect="off" />

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

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

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

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

<meta name="format-detection" content="telephone=no" />

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

<meta name="format-detection" content="email=no" />
退出移动版