前端發展到今天，移動端的流量已經超越了PC端。比如對絕大部分人來說，每天使用手機上網的時間要遠高于使用筆記本電腦、計算機的上網時間。因此移動端變得越來越重要。每個人的手機屏幕大小不同、系統不同，因此移動端屏幕的響應式適配、移動端兼容性、瀏覽器的操作Bug等是移動端部分的面試題主要考察的內容。
1、在移動端，單擊穿透是什么？
單擊穿透現象有3種。
有4種解決方案。
（1）只用 touch。
這是最簡單的解決方案，完美解決單擊穿透問題，把頁面內所有 click都換成 touch事件（ 、 touched、tap）。
（2）只用 click
因為單擊會帶來300ms的延遲，所以頁面內任何一個自定義交互都將增加300ms的延遲。
（3）輕觸〔tap）后延遲350ms再隱藏蒙層。
改動最小，缺點是隱藏蒙層變慢了，350ms還是能感覺到慢的。
（4）添加 pointer-events:none樣式。
這比較麻煩且有缺陷，不建議使用。蒙層隱藏后，給按鈕下面的元素添上pointer-events:none樣式，讓 click穿過去，350ms后去掉這個樣式?；謴晚憫娜毕菔敲蓪酉Ш蟮?50ms內，用戶單擊按鈕下面的元素沒反應，如果用戶單擊速度很快，一定會發現。
2、如何實現自適應布局？
通過以下幾種方式實現。
（1）可以使用媒體查詢做響應式頁面。
（2）用 的柵格系統。
（3）使用彈性盒模型。
3、在移動端（ Android、ioS）怎么做好用戶體驗？
從以下幾方面做好用戶體驗
（1）清晰的視覺縱線。
（2）信息的分組。
（3）極致的減法。
（4）利用選擇代替輸入。
（5）標簽及文字的排布方式。
（6）依靠明文確認密碼。
（7）合理地利用鍵盤。
4、如何解決 Android瀏覽器查看背景圖片模糊的問題？
這個問題是 的不同導致的，因為手機分辨率太小，如果按照分辨率來顯示網頁，字會非常小，所以蘋果系統當初就把 iPhone4的960×640像素的分辨率在網頁里更改為480×320像素，這樣 =2。
而 Android的 device 比較亂，值有1.5、2和3。
為了在手機里更為清晰地顯示圖片，必須使用2倍寬高的背景圖來代替img標簽（一般情況下都使用2倍）。
例如一個div的寬高是100px×100px，背景圖必須是200px×200px，然后設置 -size;contain樣式，顯示出來的圖片就比較清晰了。
5、如何解決長時間按住頁面出現閃退的問題？
通過以下代碼設置樣式。
element {
-webkit-touch-callout:none；
}
6、如何解決 iPhone及iPad下輸入框的默認內陰影問題？
通過以下代碼設置樣式。
element
{
-webkit-appearance:none；
}
7、在iOS和 Android下，如何實現觸摸元素時出現半透明灰色遮罩？
通過以下代碼設置樣式。
element {
-webkit-tap-highiight-color:rgba （255， 255， 255， 0）
}
8、在旋轉屏幕時，如何解決字體大小自動調整的問題？
通過以下代碼設置樣式。
html, body, form, fieldset, p, div, hl, h2， h3， h4， h5， h6 {
-webkit-text-size-adjust：100%;
}
9、如何解決 Android手機圓角失效問題？
通過 -clip:padding-box為失效的元素設置樣式。
10、如何解決0S中 input鍵盤事件 keyup失效問題？
通過以下代碼解決。
<script type="text/javascript">
document. getElementById（'testInput'） .addEventListener（'input', function(e){var value =e .target .value；
})；
</script>
11、如何解決iOS設置中 input按鈕樣式會被默認樣式覆蓋的問題？
設置默認樣式為none。解決方式如下。
input,
textarea {
border:0；
-webkit-appearance:none；
}
12、如何解決通過 進行skew變形、 rotate旋轉會出現鋸齒現象的問題？
通過以下代碼設置樣式。
-webkit-transform:rotate（-4deg） skew（10deg） translateZ（0）；
transform:rotate（-4deg） skew（10deg） translateZ（0）;
outline:lpx solid rgba（255， 255， 255， 0）;
13、如何解決移動端 click事件有300ms延遲的問題？
300ms延遲導致用戶體驗不好。為了解決這個問題，一般在移動端用 、 、 、tap（模擬的事件）事件來取代 click事件。
14、在iOS中，以中文輸入法輸入英文時，如何解決字母之間可能會出現六分之一空格的問題？
可以用正則表達式去掉空格。
this .value =this .value .replace ( / \u2006/g，' ')
15、如何解決移動端HTML5音頻標簽audio的 屬性失效問題？
因為自動播放網頁中的音頻或視頻會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統和 Android系統通常都會禁止自動播放和使用 的觸發播放，必須由用戶來觸發才可以播放。
解決這個問題的代碼如下。
document addEventListener (' touchstart'， function( ) {
//播放音頻
document .getElementsByTagName ('audio ) [0]. play ( );
//暫停音頻
document getElementsByTagName ('audio) [0]. pause ( )；
})；
16、如何解決移動端HTML5中date類型的input標簽不支持 屬性的問題？
代碼如下。
< input placeholder = "請輸入日期 " type="text" onfocus="（this .type='date'）" name="date">
17、如何通過HTML5調用 Android或iOS的撥號功能？
HTML5提供了自動調用撥號的標簽，只要在a標簽的href中添加tel：協議就可以了。
撥打固定電話的代碼如下。
< a href="te1:021-12345678">單擊撥打021-12345678
撥打手機號碼的代碼如下。
< a href="te1:12345678901">單擊撥打12345678901
18、如何解決上下拖動滾動條時的卡頓問題？
通過以下代碼設置樣式。
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch；
+和iOS5+支持CSS3的新屬性 - ，該屬性也可以解決上述問題。
19、如何禁止復制或選中文本？
通過以下代碼設置樣式。
Element {
-webkit-user-select:none；
-moz-user-select:none ；
-khtml-user-select:none ；
user-select:none；
20、如何解決 Android手機的默認瀏覽器不支持 的問題？
解決辦法就是把通信層的改成+http雙協議，對外封裝成Net。業務層對 的調用都改成對Net的調用。
Net默認連接，如果不攴持，就自動切換到http長輪詢。