㈠ 處理移動端的常見的兼容性的問題都有什麼
1.定位問題：ios
2.寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳
3.防止手機中網頁放大和縮小:<meta name="viewport" content="user-scalable=0" />
4.設置Web應用是否以全屏模式運行:<meta name="apple-mobile-web-app-capable" content="yes">,content的默認值是no
5.自動識別電話號碼:<meta name="format-detection" ontent="telephone=no">,telephone=no可以禁用這功能,默認值是no
6.禁止復制、選中文本:
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
7.設置緩存:
<meta http-equiv="Cache-Control" content="no-cache" />
8.蘋果手機固定定位有bug 檢查html和body是不是設置了overflow-x:hidden;
9.IOS手機中如果出現一個元素的層級非常高可還是被別的元素遮蓋的，那麼就將該元素與別的元素同級
10.給不同屏幕大小的手機設置特殊樣式:
@media only screen and (min-device-width : 320px)
and (max-device-width : 375px){ }
11.IOS中input鍵盤事件keyup、keydown、keypress支持不是很好, 用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中用輸入法輸入之後，並未立刻相應keyup事件，只有在通過刪除之後才可以響應
方法：可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
12.ios 設置input 按鈕樣式會被默認樣式覆蓋
解決方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
13.消除 IE10 裡面的那個叉號:
input:-ms-clear{display:none;}
14.關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格可以通過正則去掉
this.value = this.value.replace(/\u2006/g, ''); （BY三人行慕課）
㈡ 前端常見移動端兼容問題
因為手機解析度太小，如果按照解析度來顯示網頁，字會非常小，安卓手機 devicePixoRadio 比較亂，有 1.5 的，有 2 的也有 3 的。想讓圖片在手機里顯示更為清晰，必須使用 2x 的背景圖來代替 img 標簽（一般情況下都是 2 倍的），或者指定 background-size:contain; 都可以
用 -webkit-min-device-pixel-ratio 可以做到不同倍余銷頃數不同尺寸的圖片：
Android3+和 iOSi5+支持 CSS3 的新屬性為 overflow-scrolling
設置 alpha 值為 0 就可以去除本透明灰色遮罩，備註：transparent 的屬性值在 android 下無效。
方法一：body 添加 ontouchstart
方法二：js 給 document 綁定 touchstart 或 touchend 事件
在移動端中，如果給元素設置一個像素的邊框的話，那麼在手機上看起來是會比一個像素粗的。
解決方法：使用偽類元素模擬邊框，使用 transform 縮放
某些低端手機不支持 css3mask，可以選擇斗氏性的進降級處理
比如可以使用 js 判斷來引用不同 class：
pc 端字體正常顯示，但 ios 真機就出現，h1、span 等標簽字體比較大。
某些 Android 手機圓角失效 background-clip:padding-box ;
在移動端中，click 事件是生效的，但是，點擊之後會有 300ms 的延遲響應
原因：safari 是最早做出這個機制的，因為在移動端里，瀏覽器需要等待一段時間來判斷此次用戶操作是單擊還是雙擊，所以就有 click300ms 的延遲機制，Android 也很快就有了
不用 click，用自定義事件 tap
tap 是需要自定義的：如果用戶執行了 touchstart 在很短的時間又觸發了 touchend ,且兩次的距離很小，而且不能
引入 fastclick 庫來解決
在移動端中，圖片的處理應該是很謹慎的，假設有一張圖片本身的尺寸是 X 寬，設置和包裹它的 div 一樣寬，如果是 div 寬度小於圖片寬度沒有問題，但是如果 div 寬度大於圖片的寬度，圖片被拉伸失真
解決方法：讓圖片最大隻能是自己的寬度
例如：
div 是絕對定位的蒙層，並且 z-index 高於 a。而 a 標簽是頁面中的一個鏈接，我們給 div 綁定 tap 事件：
我們點擊蒙層時 div 正常消失，但是當我們在 a 標簽上點擊蒙層時，發現 a 鏈接被觸發，這就是所謂的點透事件。
原因：
touchstart 早於 touchend 早於豎陸 click。即 click 的觸發是由延遲的，這個時間大概在 300ms 左右，也就是說我們 tap 觸發之後蒙層隱藏。此時 click 還沒有觸發，300ms 之後由於蒙層隱藏，我們的 click 觸發到了下面的 a 鏈接。
解決：
1.盡量都使用 touch 事件來替換 click 事件。例如用 touchend 事件（推薦）
2.用 fastclick
3.用 preventDefault 阻止 a 標簽的 click
㈢ 前端ios與android的兼容性問題怎麼解決
解決瀏覽器兼容是必備問題，比如360的極速和兼容模式顯示同一個網頁
㈣ 前端面試題，移動端兼容問題有哪些，安卓和ios問題
那麼進入正文，不廢話，直接把自己了解到的和一些看法說出來。
首先是屏幕問題，現在主流的移動設備以安卓和IOS為主，我們在製作移動端頁面也是以兼容這兩種設備去布局。
首先說iPhone，不得不說iPhone的屏幕考慮到了我們開發者的難處，從而給出iPhone屏幕的dpr都是整數值，在6plus出現之前，iphone的dpr始終是2（物理像素/邏輯像素＝2），即使是6plus出現了，iphone到底其實也就只有2，3這兩個dpr。其實6plus的實際dpr並不是整數，而是2.87左右，不過，為了方便開發者來開發，iphone6plus對其做了一個調整，將dpr調整為3，然後在對屏幕進行了一個縮放。所以我們很容易對其做到兼顧。
而安卓的dpr值，並不像iphone那樣就只有兩個值。安卓的dpr是千奇百怪的，可能是1.5，2，3，4，2.5等等的都有。（甚至我還看到了1.7之類的，安卓的各個設備商，玩的真尼瑪high啊。怎麼高興怎麼來。）
那麼現在開始說說移動端怎麼布局以及字體該怎麼設置，因為有各種各樣的解決方式，我就不一一贅述，直接說手淘的解決方案：flexible.js
我為什麼又一次把這個拿出來說，主要有兩點原因：1.我覺得它好用，解決方式簡單粗暴。2.它經過了比較長時間的考驗，如今手淘還在用它。
具體的使用方法自己可以去flexible.js看看，這里我簡單說說它的方案以及個人對它的改良。
㈤ web前端的移動端的兼容性問題怎麼解決
//兼容IE瀏覽器的
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//兼容移動端的
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
//html5.shiv兼容不支持html5 的
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
一般在head中添加這幾個之後，移動端就沒有什麼大問題了，希望對你有幫助，望採納！
㈥ 前端兼容蘋果手機ios問題錦集
new Date("2020-02-02 08:00") 變為 new Date("2020/02/02 08:00")
html,body{ -webkit-text-size-adjust: none; } // 當需要在中文版chrome瀏覽器中顯示小於12px的字體時，而且此時頁面放大效果腔喚會被阻止
html,body{ -webkit-tap-highlight-color: rgba(0,0,0,0); } /拆鬧/ 去掉蘋果手機點擊瞬間出現的灰色背景
input{ -webkit-appearance: none; } // 去除蘋果手機默認的input樣式）
selector{ cursor: pointer } // 給IOS系統里cursor不為pointer的元素添加事件時會不同程度受影響，加上cursor: pointer可解決
img{ pointer-events: none; } // 阻止圖片在伍御凱微信里被點擊放大
㈦ 關於H5在安卓ios平台兼容性問題，及解決方案
capture 屬性：在webapp上使用 input 的 file 屬性，指定 capture 屬性可以調用系統默認相機、攝像胡握絕塵和錄音功能。
capture 表示，可以捕獲到系統默認設備的媒體信息，如下：
capture="camera" 相機
capture="camcorder" 攝像機
capture="microphone" 錄音褲宏慶
㈧ Vue項目在部分ios手機Safari瀏覽器上打開為白屏
Vue項目在部分ios手機Safari瀏覽器上打開為白屏有可能是一下原因造成：
第一：部分es6語法不兼容 推薦在全局引入 babel-polyfill 解決es6在Safari的兼容問題
第二：有部分Safari瀏覽器設置了不允許網站讀寫所有cookie，不允許網站跟蹤，這種仔歷情況下在項目中使用 localStorage sessionStorage cookie都會報錯（大部分是這個原因）
查看Safari隱櫻扮私和安全性：設置-> Safari
第三：在Safari如何跟蹤調試
1、打開手機端web檢查器，設置-> Safari ->高級（最底部）-> Web檢查器打開
脊戚灶 2、確保iOS系統手機接入 MAC 電腦（必須是Mac，window調試不了ios系統）
3、找到Mac電腦的 Safari瀏覽器，找到開發者，就會顯示的手機的設備
4、此時此刻就可以使用了，調試各個App上網頁版的頁面了。
註：如果是 Hybrid 嵌入式開發，線上版本，可能就不能調試了，因為IOS App 會把線上的調試功能 給禁用，安全！
㈨ 國內伺服器微信項目安卓手機訪問很流暢,ios手機訪問很卡
題主是否想詢問「國內桐伏伺服器微信項目安卓手機訪問很流暢，ios手機訪問很卡怎麼辦嗎」解決方法：
1、優化前端代碼，確保代碼的兼容性和性能。可以使用一些前端性能優化工具，如Webpack、Gulp、Grunt等，來對前端代碼進行優化和壓縮，以提高頁面的載入速度和性能。
2、針對不同的操作系統和瀏覽器，進行適配和優化。可以使用一些前端框架，如Bootstrap、AntDesign、MaterialUI等，來進行頁面的適配和優化，保證在不同的操作系統和瀏覽器上都能夠正常運行和局羨攜顯示。
3、在伺服器端進行優化，提高伺服器的響應速度和處理能力。可以對伺服器進行升級或者優化，增加帶寬和處理器等硬體資源，以提高伺服器的響應速度和處理能力，從而提高網站的訪問速度和性能。
4、針對不同的操作系統和瀏覽器進行測試和調試，找出問題的具體原因，進行針對性的解決。可以使用一些調試工具，如ChromeDevTools、Firebug等，來進行調試和排查問題派猜。
㈩ ios和android 瀏覽器適配問題總結
移動端、 適配（兼容）、 ios點擊事件300ms延遲、 點擊穿透、 定位失效......
關於Web移宴孝漏動端Fixed布局的解決方案，這篇文章也不錯 http://efe..com/blog/mobile-fixed-layout/
詳細介紹見這里： https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
一篇文章有詳細介紹，地址： http://www.jb51.net/post/phone_web_ysk
//問題一解決，我目前用的是js。如下
//問題二，是因為form提交默認做了表單驗證，step默認是1,要設置step屬性，假如保留2位小數，寫法如下：
<input type="number"step="0.01"/>
關於step，我在這里做簡單的介紹，input 中type=number，一般會自動生成一個上下箭頭，點擊上箭頭默認增加一個step，點擊下箭頭默認會減少一個step。number中默認step是1。也就是step=0.01,可以允許輸入2位小數，並且點擊上下箭頭分別增加0.01和減少0.01。
假如step和min一起使用，那麼數值必須在min和max之間。
看下面的例子：
<input type="number"step="3.1"min="1"/>
輸入框可以輸入哪些數字？
首先，最小值是1，那麼可以輸入1.0，第二個是可以輸入（1+3.1）那就是4.1,以此類推，每次點擊上下箭頭都會增加或者減少3.1，輸入其他數字無效。這就是step的簡單介紹。
//問題三，去除input默認樣式
解決方慎凱式如下：
設置如下：
可以設置如下：
iOS 瀏覽器橫屏時會重置字體大小，設晌爛置 text-size-adjust 為 none 可以解決 iOS 上的問題，
但桌面版 Safari 的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。
這個不是 BUG，由於自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才可以播放。
解決方法思路：先通過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始載入，後面用 JS 再操作就沒問題了）。
這個我感覺沒有什麼好的解決方案，用如下方法
有些機型的搜索input控制項會自帶close按鈕（一個偽元素），而通常為了兼容所有瀏覽器，我們會自己實現一個，此時去掉原生close按鈕的方法為:
如果想使用原生close按鈕，又想使其符合設計風格，可以對這個偽元素的樣式進行修改。
//zepto方式: