前端發展到今天，移動端的流量已經超越了PC端。比如對絕大部分人來說，每天使用手機上網的時間要遠高于使用筆記本電腦、計算機的上網時間。是以移動端變得越來越重要。每個人的手機螢幕大小不同、系統不同，是以移動端螢幕的響應式适配、移動端相容性、浏覽器的操作Bug等是移動端部分的面試題主要考察的内容。
1、在移動端，單擊穿透是什麼？
單擊穿透現象有3種。
- 單擊穿透問題：單擊蒙層（mask）上的“關閉”按鈕，蒙層消失後，發現觸發了按鈕下面元素的 click事件。
- 頁面單擊穿透問題：如果按鈕下面恰妤是一個有href屬性的a标簽，那麼頁面就會發生跳轉。
- 跨頁面單擊穿透問題：這次沒有蒙層了，直接單擊頁内按鈕跳轉至新頁，然後發現新頁面中對應位置元素的 click事件被觸發了。
有4種解決方案。
（1）隻用 touch。
這是最簡單的解決方案，完美解決單擊穿透問題，把頁面内所有 click都換成 touch事件（ touchstart、 touched、tap）。
（2）隻用 click
因為單擊會帶來300ms的延遲，是以頁面内任何一個自定義互動都将增加300ms的延遲。
（3）輕觸〔tap）後延遲350ms再隐藏蒙層。
改動最小，缺點是隐藏蒙層變慢了，350ms還是能感覺到慢的。
（4）添加 pointer-events:none樣式。
這比較麻煩且有缺陷，不建議使用。蒙層隐藏後，給按鈕下面的元素添上pointer-events:none樣式，讓 click穿過去，350ms後去掉這個樣式。恢複響應的缺陷是蒙層消失後的350ms内，使用者單擊按鈕下面的元素沒反應，如果使用者單擊速度很快，一定會發現。
2、如何實作自适應布局？
通過以下幾種方式實作。
（1）可以使用媒體查詢做響應式頁面。
（2）用 Bootstrap的栅格系統。
（3）使用彈性盒模型。
3、在移動端（ Android、ioS）怎麼做好使用者體驗？
從以下幾方面做好使用者體驗
（1）清晰的視覺縱線。
（2）資訊的分組。
（3）極緻的減法。
（4）利用選擇代替輸入。
（5）标簽及文字的排布方式。
（6）依靠明文确認密碼。
（7）合理地利用鍵盤。
4、如何解決 Android浏覽器檢視背景圖檔模糊的問題？
這個問題是 devicePixelRatio的不同導緻的，因為手機分辨率太小，如果按照分辨率來顯示網頁，字會非常小，是以蘋果系統當初就把 iPhone4的960×640像素的分辨率在網頁裡更改為480×320像素，這樣 devicePixelRatio=2。
而 Android的 device PixelRatio比較亂，值有1.5、2和3。
為了在手機裡更為清晰地顯示圖檔，必須使用2倍寬高的背景圖來代替img标簽（一般情況下都使用2倍）。
例如一個div的寬高是100px×100px，背景圖必須是200px×200px，然後設定 background-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手機圓角失效問題？
通過 background-clip:padding-box為失效的元素設定樣式。
10、如何解決0S中 input鍵盤事件 keyup失效問題？
通過以下代碼解決。
<input type='text' id='testInput">
<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、如何解決通過 transform進行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延遲導緻使用者體驗不好。為了解決這個問題，一般在移動端用 touchstart、 touchend、 touchmove、tap（模拟的事件）事件來取代 click事件。
14、在iOS中，以中文輸入法輸入英文時，如何解決字母之間可能會出現六分之一空格的問題？
可以用正規表達式去掉空格。
this .value =this .value .replace ( / \u2006/g，' ') 15、如何解決移動端HTML5音頻标簽audio的 autoplay屬性失效問題？
因為自動播放網頁中的音頻或視訊會給使用者帶來一些困擾或者不必要的流量消耗，是以蘋果系統和 Android系統通常都會禁止自動播放和使用 JavaScript的觸發播放，必須由使用者來觸發才可以播放。
解決這個問題的代碼如下。
document addEventListener (' touchstart'， function( ) {
//播放音頻
document .getElementsByTagName ('audio ) [0]. play ( );
//暫停音頻
document getElementsByTagName ('audio) [0]. pause ( )；
})； 16、如何解決移動端HTML5中date類型的input标簽不支援 placeholder屬性的問題？
代碼如下。
< 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> 撥打手機号碼的代碼如下。
< a href="te1:12345678901">單擊撥打12345678901</a> 18、如何解決上下拖動滾動條時的卡頓問題？
通過以下代碼設定樣式。
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch； Android3+和iOS5+支援CSS3的新屬性 overflow- scrolling，該屬性也可以解決上述問題。
19、如何禁止複制或選中文本？
通過以下代碼設定樣式。
Element {
-webkit-user-select:none；
-moz-user-select:none ；
-khtml-user-select:none ；
user-select:none； 20、如何解決 Android手機的預設浏覽器不支援 websocket的問題？
解決辦法就是把通信層的websocket改成websocket+http雙協定，對外封裝成Net。業務層對 websocket的調用都改成對Net的調用。
Net預設連接配接websocket，如果不攴持，就自動切換到http長輪詢。
http的長輪詢在使用的時候會有卡頓現象。
21、說說你所知道的移動端響應式适配的方法。
對于簡單一點的頁面，一般高度直接設定成固定值，寬度一般撐滿整個螢幕。
對于稍複雜一些的頁面，利用百分比設定元素的大小來進行适配，或者利用flex等CSS屬性設定一些需要定制的寬度。
對于再複雜一些的響應式頁面，需要利用CSS3的媒體查詢屬性來進行适配，大緻思路是根據螢幕的大小，設定相應的CSS。
本文完〜
