小猿圈WEB前端之HTML5+CSS3面试题（一）

越来越多人喜欢前端岗位，毕业季已经悄然来临，很多毕业生面临找工作，那你们在狂欢快乐最后恋恋不舍之际，是否想着过几天招工作的危机。如果想要毕业之后，走向前端的岗位，那看到小编的文章后好好做一下这套题，今天小猿圈总结了一套经典的h5+css的面试题。

一、移动端（Android IOS）怎么做好用户体验?

1.清晰的视觉纵线

2.信息的分组、极致的减法

3.利用选择代替输入

4.标签及文字的排布方式

5.依靠明文确认密码

6.合理的键盘利用

二、什么是Retina 显示屏，带来了什么问题？

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

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

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

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

四、部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同***商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{   
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
    -webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2，对于按钮类还有个办法，不使用a或者input标签，直接用div标签。

五、webkit表单元素的默认外观怎么重置

通用：.css{-webkit-appearance:none;}

伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;   
}
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
六、webkit表单输入框placeholder的颜色值能改变么?

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

七、webkit表单输入框placeholder的文字能换行么?

ios可以，android不行

在textarea标签下都可以换行

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

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

九、禁止ios和android用户选中文字

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

十、打电话发短信写邮件怎么实现

打电话：<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>

十一、模拟按钮hover效果

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

1. 直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式（兼容性ios5+、部分android 4+、winphone 8）。

2. 要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名

十二、audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

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

以上就是小猿圈web前端老师总结的HTML5+CSS3面试题一部分，大家做的***，感觉no problem的可以去试试前端的面试了，如果感觉有点难难度的话，建议大家把弱项去小猿圈学习一下，给自己加加血，争取找到一份满意的工作。