1、移动端你们一般采用什么布局？移动端设计稿是多大的尺寸？
● 定宽布局
● 一般移动端设计稿是640或者750的尺寸
2、移动布局自适应不同屏幕的几种方式
（1）响应式布局
（2）100%布局（弹性布局）
（3）等比缩放布局（rem）
3、你们做移动端平时在什么浏览器上测试？
Chrome，Safari，微信X5，UC，其他手机自带浏览器
4、说说移动端是如何调试的？
（1）模拟手机调试chrome://inspect
（2）真机调试之android手机+Chrome
（3）真机调试之iphone + safari
（4）UC浏览器
（5）微信内置浏览器调试
（6）debuggap
（7）抓包
5、移动端怎么固定横屏显示？
（1） 检测手机竖屏的时候，元素给元素添加90deg的旋转
（2） 检测手机横屏的时候，元素给元素的旋转再改为0
6、em和rem的区别
● em相对父级元素设置的font-size来设置大小 如果父元素没有设置font-size ，则继续向上查找，直至有设置font-size元素
● rem直接参照html标签字体大小，并且所有使用rem单位的都是参照html标签
7、移动端用过那些meta标签？
<!--1:设置视口宽度 缩放比例--><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<!--2:忽略将数字变为电话号码--><meta content="telephone=no" name="format-detection">
<!--3:忽略识别邮箱--><meta name="format-detection" content="email=no" />
<!--4:IOS中Safari允许全屏浏览--><meta content="yes" name="apple-mobile-web-app-capable">
8、为什么移动端click会有300毫秒延迟？
因为移动端浏览器会有一些默认的行为，比如双击缩放、双击滚动。这些行为尤其是双击缩放，主要是为桌面网站在移动端的浏览体验设计的。而在用户对页面进行操作的时候，移动端浏览器会优先判断用户是否要触发默认的行为。
9、移动端zepto中的tap事件点透问题？
● 问题点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件
● zepto的tap事件是绑定到document的，所以一般点击tap事件都会冒泡到document才会触发。当点击隐藏蒙层的时候默认也会手指触发到蒙层下面的元素 执行事件
（1） github上有个fastclick插件，用来规避click事件的延时执行
（2）用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
//tap事件出现点透问题
$("#id").on("tap", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
//touchend事件解决点头问题
$("#id").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});
（3）给tap事件里面的隐藏蒙层方法执行的方法300毫秒延迟
$("#id").on('tap',function(ev){
setTimeout(function(){
$("#id").hide();
},320)
})
10、固定定位布局键盘挡住输入框内容？
分析：
● 在软件盘弹出之后（在focus中加个延迟时间），获取input的坐标
● 判断input是否遮挡
● 判断 input 是否在可视区的高度以下
● 如果被遮挡了，就向上移动整个页面
（1）通过绑定窗口改变事件,监听键盘的弹出。然后去改变固定定位元素的位置。默认键盘的宽度应该是页面的2分之一。所以我们位移的距离改成键盘的二分之一就可以。
window.onresize = function(){
//$(".mian")就是固定定位的元素
if($(".mian").css('top').replace('px','') != 0){
$(".mian").css('top',0);
}else{
var winHeight = $(window).height();
$(".mian").css('top',-(winHeight/4));
}
}
（2）通过定时器实时监听是否触发input。如果触发input框，就把固定定位改变成静态定位。这样就会浏览器会总动把内容顶上去。
function fixedWatch(el) {
//activeElement获取焦点元素
if(document.activeElement.nodeName == 'INPUT') {
el.css('position', 'static');
} else {
el.css('position', 'fixed');
}
}
setInterval(function() {
fixedWatch($('.mian'));
}, 500);
11、为什么安卓浏览器看背景图片，有些设备会模糊？
因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况下都是2倍的），或者指定background-size:contain;都可以。
用-webkit-min-device-pixel-ratio可以做到不同倍数不同尺寸的图片：
.icon-logo{
background-image: url(src/assets/logo.png);
width: 24px;
height: 24px;
background-size: contain;}@media screen and (-webkit-min-device-pixel-ratio: 2){
.icon-logo { background-image: url(src/assets/logo@2.png); }}@media screen and (-webkit-min-device-pixel-ratio: 3){
.icon-logo { background-image: url(src/assets/logo@3.png); }}@media screen and (-webkit-min-device-pixel-ratio: 4){
.icon-logo { background-image: url(src/assets/logo@4.png); }}
12、pc端与移动端字体大小的问题
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
-webkit-text-size-adjust:100%;}
pc端字体正常显示，但ios真机就出现，h1、span等标签字体比较大。
html{
-webkit-text-size-adjust:100%;/*ios端谷歌浏览器测试有效，Android端未测试*/}
13、如何防止手机中页面放大和缩小？
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
14、如何解决上下拉动滚动条时出现卡顿的现象？
body{
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;}
Android3+和iOSi5+支持CSS3的新属性为overflow-scrolling
15、如何解决长时间按住页面闪退的现象？
element{
-webkit-touch-callout:none;}
16、iphone及ipad下输入框默认内阴影
element{
-webkit-appearance:none;}
17、ios和android下触摸元素时出现半透明灰色遮罩
element{
-webkit-tap-highlight-color:rgba(255,255,255,0);}
设置alpha值为0就可以去除本透明灰色遮罩，备注：transparent的属性值在android下无效。
18、active兼容处理即伪类：active失效
方法一：body添加ontouchstart
<body ontouchstart=''>
方法二：js给document绑定touchstart或touchend事件
<style>
a
{
color:#000;
}
a:active
{
color:#fff;
}
</style>
<a href=foo>bar</a>
<script>
document.addEventListentener('touchstart',function(){},false);
</script>
19、移动端为什么会有一像素问题？如何解决？
因为在移动端，由于屏幕分辨率的不同，现在分为一倍屏、二倍屏、三倍屏。在不同的分辨率上，有可能一像素被渲然成二个像素点或者三个像素点，所以在实际写代码的时候，我们写的border: 1px solid #000; 可能实际被渲然为 2px/3px；
（1）先使用伪类元素实现边框效果，然后通过媒体查询来操控transform: scale来适配不同分辨率
.border-bottom{
position: relative;}.border-bottom::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #e4e4e4;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;}
/* 2倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}}
/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}}
（2）使用border-image来代替border
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url("border.png") 2 0 stretch;
border-image: url("border.png") 2 0 stretch;}
（3）使用viewport +rem
● 设置meta标签
<meta
name="viewport"
id="WebViewport"
content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
● 并在js中通过判断当前是一倍屏还是二倍屏、三倍屏，来动态的设置meta标签的内容
function rem() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
let viewport = document.querySelector("#WebViewport")
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} }rem()
window.onresize = rem;
（4）border.css通过项目中引入border.css来解决
20、响应式图片
在移动端中，图片的处理应该是很谨慎的。假设有一张图片本身的尺寸是X宽，设置和包裹它的div一样宽，如果是div宽度小于图片宽度没有问题，但是如果div宽度大于图片的宽度，图片则会被拉伸失真
解决方法：让图片最大只能是自己的宽度
img{
max-width: 100%;
display: block;
margin: 0 auto;
}
21、使用了3d做动画之后，3d元素下边的文字失真的问题
给上面动画的幻灯片什么的外层加上绝对定位，定位里面一层加上相对定位。
注：所有题目均来源于网络，只是稍微进行加工。
