web移動端常問面試題

不愛寫程式碼的程式設計師發表於2018-03-07
Web面試題

1:移動端你們一般採用什麼佈局？移動端設計稿是多大的尺寸？

  • 定寬佈局
  • 一般移動端設計稿是640或者750的尺寸

2:em和rem的區別

  • em相對父級元素設定的font-size來設定大小 如果父元素沒有設定font-size ，則繼續向上查詢，直至有設定font-size元素
  • rem直接參照html標籤字型大小，並且所有使用rem單位的都是參照html標籤

3:移動端用過那些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">

複製程式碼

4:移動端click 300毫秒延遲原因？

移動端瀏覽器會有一些預設的行為，比如雙擊縮放、雙擊滾動。這些行為，尤其是雙擊縮放，主要是為桌面網站在移動端的瀏覽體驗設計的。而在使用者對頁面進行操作的時候，移動端瀏覽器會優先判斷使用者是否要觸發預設的行為。

5:移動端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)
})
複製程式碼

6:固定定位佈局 鍵盤擋住輸入框內容？

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);
複製程式碼

7: 移動端相容問題？

1:移動端預設的input和按鈕樣式還有點選出現的樣式不一樣 需要預設去清除一些預設樣式
//去掉webkit的滾動條——display: none;
//其他引數
::-webkit-scrollba //滾動條整體部分
::-webkit-scrollbar-thumb   //滾動條內的小方塊
::-webkit-scrollbar-track   //滾動條軌道
::-webkit-scrollbar-button  //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece  //滾動條中間部分，內建軌道
::-webkit-scrollbar-corner       //邊角，兩個滾動條交匯處
::-webkit-resizer            //兩個滾動條的交匯處上用於通過拖動調整元素大小的小控制元件

// 禁止長按連結與圖片彈出選單
a,img { -webkit-touch-callout: none }    

// 禁止ios和android使用者選中文字
html,body {-webkit-user-select:none; user-select: none; }

// 改變輸入框placeholder的顏色值
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

// android上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}

// 阻止windows Phone的預設觸控事件
/*說明：winphone下預設觸控事件事件使用e.preventDefault是無效的，可通過樣式來禁用，如：*/
html { -ms-touch-action:none; } //禁止winphone預設觸控事件




//ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；
//winphone系統,點選標籤產生的灰色半透明背景，能通過設定<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字元
}   
// 也可以 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">



複製程式碼
2:手機拍照和上傳圖片
/*
*IOS有拍照、錄影、選取本地圖片功能，
*部分Android只有選擇本地圖片功能。
*Winphone不支援
*/
<input type="file" accept="images/*" />
複製程式碼
3:消除transition閃屏
.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}


======一下內容與上無關=====
//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支援硬體加速，當檢測到某個DOM元素應用了某些CSS規則時就會自動開啟，從而解決頁面閃白，保證動畫流暢。
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
複製程式碼
4:固定定位相關問題？
  1. 固定定位會產生 鍵盤彈出遮住固定元素裡面元素的input框
  2. 固定定位的遮罩層彈出時 滾動到最底部 qq和uc瀏覽器會出現遮罩層下面的樣式露出來
5: 在ios上寫有郵箱文字點選這個郵箱地址不會有反應，安卓手機上點選郵箱會自動開啟本地郵箱軟體。

8:移動端橫屏怎麼處理？

寫好一套樣式 獲取視窗的寬度大於高度的時候 說明橫屏了 。那麼就顯示一個遮罩層提示使用者 豎屏觀看更佳。

相關文章