web前端面試題-移動開發篇（持續更新...）

繼續分享我整理了5年的面試題

html：https://segmentfault.com/a/1190000020888959

css：https://segmentfault.com/a/1190000020898762

javascript：https://segmentfault.com/a/1190000020933141

jquery：https://segmentfault.com/a/1190000020938095

另外附上課程鏈接：https://www.3mooc.com/front/l...

1，ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

2，webkit表單輸入框placeholder的顏色值能改變麼

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

3，webkit表單輸入框placeholder的文字能換行麼

ios可以，android不行~
在textarea標籤下都可以換行~

4，禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}

5，禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

6，打電話發短信寫郵件怎麼實現

打電話：    <a href="tel:[phone]">打電話給:0755-10086</a>
發短信，winphone系統無效    <a href="sms:10086">發短信給: 10086</a>
寫郵件：    <a href=“mailto:[email protected]">[email protected]</a>

7，模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，但是移動設備中並沒有鼠標指針，使用css的hover並不能滿足我們的需求，還好國外有個激活移動端css的active效果。

1，直接在body上添加ontouchstart，同樣可激活移動端css的active效果，比較推薦這種方式（兼容性ios5+、部分android 4+、winphone 8）
2，要做到全兼容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名

8，audio元素和video元素在ios和andriod中無法自動播放

應對方案：觸屏即播

 $('html').one('touchstart',function(){
   audio.play()
 })

9，消除transition閃屏

網絡都是這麼寫的，但我並沒有測試出來

.css{
    /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
    -webkit-backface-visibility: hidden;
}

10，開啓硬件加速

1，解決頁面閃白
2，保證動畫流暢

.css {
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
}

11，取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

12，android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

13，H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

14，忽略將頁面中的數字識別爲電話號碼

<meta name="format-detection" content="telephone=no" />

15，忽略Android平臺中對郵箱地址的識別

<meta name="format-detection" content="email=no" />