隨著互聯網時代的到來，大家每天使用手機的時間要遠遠高于筆記本或者臺式的時間。因此，許多企業就會更加著重于移動端的開發。而對于web前端來說，移動web前端開發涉及到每個人的手機屏幕以及手機系統、兼容等等。因此，如果移動web前端面試就和pc端考察側重就會有所區別。接下來就給大家分享一下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、移動端用的哪個js庫？

答：zepto.js。這個與jq差不多，是屬于縮小版的jq。

5、移動端click 300毫秒延遲原因

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

6、移動端橫屏怎么處理？

答：寫好一套樣式 獲取窗口的寬度大于高度的時候 說明橫屏了 。那么就顯示一個遮罩層提示用戶 豎屏觀看更佳。

7、處理過哪些移動端兼容問題？（面試常問）

答：

移動端默認的input和按鈕樣式還有點擊出現的樣式不一樣 需要默認去清除一些默認樣式
手機拍照和上傳圖片，IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能，Winphone不支持
消除transition閃屏
固定定位相關問題

• 固定定位會產生 鍵盤彈出遮住固定元素里面元素的input框
• 固定定位的遮罩層彈出時 滾動到最底部 qq和uc瀏覽器會出現遮罩層下面的樣式露出來

在ios上寫有郵箱文本點擊這個郵箱地址不會有反應，安卓手機上點擊郵箱會自動打開本地郵箱軟件

8、說出移動端的幾種布局方案，至少說出3種（面試常問）

答：

「1」流式布局（百分比布局）

• 將盒子的寬度設置成百分比，從而根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。

• 該布局是移動web開發使用的比較常見的布局方式

• 開發時，需要定義頁面的最大和最小支持寬度

「2」flex彈性布局：

通過給父盒子添加flex屬性，來控制子盒子的位置和排序方式，采用flex布局的元素，稱為Flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱“項目”。移動端應用廣泛，PC端瀏覽器支持情況較差。

「3」rem適配布局

現市場主流的rem適配方案技術搭配：less+媒體查詢+rem、flexible.js+rem

「4」響應式布局

開發原理是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置，從而適配不同的設備，需要一個父級做為布局容器，來配合子級元素來實現變化效果

以上就是“web前端移動端面試高頻問題分享”的詳細內容，想要了解更多web前端教程歡迎持續關注編程學習網