1、移動(dòng)端你們一般采用什么布局？移動(dòng)端設(shè)計(jì)稿是多大的尺寸？
● 定寬布局
● 一般移動(dòng)端設(shè)計(jì)稿是640或者750的尺寸
2、移動(dòng)布局自適應(yīng)不同屏幕的幾種方式
（1）響應(yīng)式布局
（2）100%布局（彈性布局）
（3）等比縮放布局（rem）
3、你們做移動(dòng)端平時(shí)在什么瀏覽器上測(cè)試？
? ? ? Chrome，Safari，微信X5，UC，其他手機(jī)自帶瀏覽器
4、說(shuō)說(shuō)移動(dòng)端是如何調(diào)試的？
（1）模擬手機(jī)調(diào)試chrome://inspect
（2）真機(jī)調(diào)試之a(chǎn)ndroid手機(jī)+Chrome
（3）真機(jī)調(diào)試之iphone + safari
（4）UC瀏覽器
（5）微信內(nèi)置瀏覽器調(diào)試
（6）debuggap
（7）抓包
5、移動(dòng)端怎么固定橫屏顯示？
（1）?檢測(cè)手機(jī)豎屏的時(shí)候，元素給元素添加90deg的旋轉(zhuǎn)
（2）?檢測(cè)手機(jī)橫屏的時(shí)候，元素給元素的旋轉(zhuǎn)再改為0
6、em和rem的區(qū)別
● em相對(duì)父級(jí)元素設(shè)置的font-size來(lái)設(shè)置大小 如果父元素沒(méi)有設(shè)置font-size ，則繼續(xù)向上查找，直至有設(shè)置font-size元素
● rem直接參照html標(biāo)簽字體大小，并且所有使用rem單位的都是參照html標(biāo)簽
7、移動(dòng)端用過(guò)那些meta標(biāo)簽？
<!--1:設(shè)置視口寬度 ?縮放比例--><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">?
<!--2:忽略將數(shù)字變?yōu)殡娫捥?hào)碼--><meta content="telephone=no" name="format-detection">?
<!--3:忽略識(shí)別郵箱--><meta name="format-detection" content="email=no" />?
<!--4:IOS中Safari允許全屏瀏覽--><meta content="yes" name="apple-mobile-web-app-capable">
8、為什么移動(dòng)端click會(huì)有300毫秒延遲？
? ? ? ? 因?yàn)橐苿?dòng)端瀏覽器會(huì)有一些默認(rèn)的行為，比如雙擊縮放、雙擊滾動(dòng)。這些行為尤其是雙擊縮放，主要是為桌面網(wǎng)站在移動(dòng)端的瀏覽體驗(yàn)設(shè)計(jì)的。而在用戶對(duì)頁(yè)面進(jìn)行操作的時(shí)候，移動(dòng)端瀏覽器會(huì)優(yōu)先判斷用戶是否要觸發(fā)默認(rèn)的行為。
9、移動(dòng)端zepto中的tap事件點(diǎn)透問(wèn)題？
● 問(wèn)題點(diǎn)擊穿透問(wèn)題：點(diǎn)擊蒙層（mask）上的關(guān)閉按鈕，蒙層消失后發(fā)現(xiàn)觸發(fā)了按鈕下面元素的click事件
● zepto的tap事件是綁定到document的，所以一般點(diǎn)擊tap事件都會(huì)冒泡到document才會(huì)觸發(fā)。當(dāng)點(diǎn)擊隱藏蒙層的時(shí)候默認(rèn)也會(huì)手指觸發(fā)到蒙層下面的元素 ?執(zhí)行事件
（1） github上有個(gè)fastclick插件，用來(lái)規(guī)避click事件的延時(shí)執(zhí)行
（2）用touchend代替tap事件并阻止掉touchend的默認(rèn)行為preventDefault()
//tap事件出現(xiàn)點(diǎn)透問(wèn)題
?$("#id").on("tap", function (event) {
//很多處理比如隱藏什么的
?????event.preventDefault();
?});
//touchend事件解決點(diǎn)頭問(wèn)題
?$("#id").on("touchend", function (event) {
//很多處理比如隱藏什么的
?????event.preventDefault();
?});
（3）給tap事件里面的隱藏蒙層方法執(zhí)行的方法300毫秒延遲
$("#id").on('tap',function(ev){
setTimeout(function(){
$("#id").hide();
},320)
})
10、固定定位布局鍵盤擋住輸入框內(nèi)容？
分析：
● 在軟件盤彈出之后（在focus中加個(gè)延遲時(shí)間），獲取input的坐標(biāo)
● 判斷input是否遮擋
● 判斷 input 是否在可視區(qū)的高度以下
●?如果被遮擋了，就向上移動(dòng)整個(gè)頁(yè)面
（1）通過(guò)綁定窗口改變事件,監(jiān)聽(tīng)鍵盤的彈出。然后去改變固定定位元素的位置。默認(rèn)鍵盤的寬度應(yīng)該是頁(yè)面的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）通過(guò)定時(shí)器實(shí)時(shí)監(jiān)聽(tīng)是否觸發(fā)input。如果觸發(fā)input框，就把固定定位改變成靜態(tài)定位。這樣就會(huì)瀏覽器會(huì)總動(dòng)把內(nèi)容頂上去。
function fixedWatch(el) {
//activeElement獲取焦點(diǎn)元素
if(document.activeElement.nodeName == 'INPUT') {
el.css('position', 'static');
} else {
el.css('position', 'fixed');
}
}
setInterval(function() {
fixedWatch($('.mian'));
}, 500);
11、為什么安卓瀏覽器看背景圖片，有些設(shè)備會(huì)模糊？
? ? ?因?yàn)槭謾C(jī)分辨率太小，如果按照分辨率來(lái)顯示網(wǎng)頁(yè)，字會(huì)非常小，安卓手機(jī)devicePixoRadio比較亂，有1.5的，有2的也有3的。想讓圖片在手機(jī)里顯示更為清晰，必須使用2x的背景圖來(lái)代替img標(biāo)簽（一般情況下都是2倍的），或者指定background-size:contain;都可以。
用-webkit-min-device-pixel-ratio可以做到不同倍數(shù)不同尺寸的圖片：
.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端與移動(dòng)端字體大小的問(wèn)題
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
????-webkit-text-size-adjust:100%;}
pc端字體正常顯示，但ios真機(jī)就出現(xiàn)，h1、span等標(biāo)簽字體比較大。
html{
????-webkit-text-size-adjust:100%;/*ios端谷歌瀏覽器測(cè)試有效，Android端未測(cè)試*/}
13、如何防止手機(jī)中頁(yè)面放大和縮?。?/b>
<meta name="viewport"?content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"?/>
14、如何解決上下拉動(dòng)滾動(dòng)條時(shí)出現(xiàn)卡頓的現(xiàn)象？
body{
????-webkit-overflow-scrolling:touch;
????overflow-scrolling:touch;}
Android3+和iOSi5+支持CSS3的新屬性為overflow-scrolling
15、如何解決長(zhǎng)時(shí)間按住頁(yè)面閃退的現(xiàn)象？
element{
????-webkit-touch-callout:none;}
16、iphone及ipad下輸入框默認(rèn)內(nèi)陰影
element{
????-webkit-appearance:none;}
17、ios和android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩
element{
????-webkit-tap-highlight-color:rgba(255,255,255,0);}
設(shè)置alpha值為0就可以去除本透明灰色遮罩，備注：transparent的屬性值在android下無(wú)效。
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、移動(dòng)端為什么會(huì)有一像素問(wèn)題？如何解決？?
因?yàn)樵谝苿?dòng)端，由于屏幕分辨率的不同，現(xiàn)在分為一倍屏、二倍屏、三倍屏。在不同的分辨率上，有可能一像素被渲然成二個(gè)像素點(diǎn)或者三個(gè)像素點(diǎn)，所以在實(shí)際寫代碼的時(shí)候，我們寫的border: 1px solid #000;?可能實(shí)際被渲然為 2px/3px；
（1）先使用偽類元素實(shí)現(xiàn)邊框效果，然后通過(guò)媒體查詢來(lái)操控transform: scale來(lái)適配不同分辨率
.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來(lái)代替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
● 設(shè)置meta標(biāo)簽
<meta
?????name="viewport"
?????id="WebViewport"
?????content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>?
● 并在js中通過(guò)判斷當(dāng)前是一倍屏還是二倍屏、三倍屏，來(lái)動(dòng)態(tài)的設(shè)置meta標(biāo)簽的內(nèi)容
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通過(guò)項(xiàng)目中引入border.css來(lái)解決
20、響應(yīng)式圖片
? ? ? ?在移動(dòng)端中，圖片的處理應(yīng)該是很謹(jǐn)慎的。假設(shè)有一張圖片本身的尺寸是X寬，設(shè)置和包裹它的div一樣寬，如果是div寬度小于圖片寬度沒(méi)有問(wèn)題，但是如果div寬度大于圖片的寬度，圖片則會(huì)被拉伸失真
解決方法：讓圖片最大只能是自己的寬度
img{
max-width: 100%;
display: block;
margin: 0 auto;
}
21、使用了3d做動(dòng)畫之后，3d元素下邊的文字失真的問(wèn)題
給上面動(dòng)畫的幻燈片什么的外層加上絕對(duì)定位，定位里面一層加上相對(duì)定位。
注：所有題目均來(lái)源于網(wǎng)絡(luò)，只是稍微進(jìn)行加工。
