移動端web兼容性_web前端的移動端的兼容性問題怎麼解決

『壹』移動開發 or web 前端

如果你對某一方向感興趣,比如 web 前端跟移動開發都接觸了解過,但是對某一個很感興趣,那麼我強烈建議跟隨你的興趣,不用擔心市場、專業不符等其他客觀條件,掌握好一門技能最多是...

『貳』處理移動端的常見的兼容性的問題都有什麼

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三人行慕課）

『叄』你們開發移動端web頁面需要考慮兼容嗎

兼容還是需要考慮的。主流的也就那麼幾個瀏覽器吧，都試試唄。

『肆』移動前端開發和web前端開發有什麼區別

移動前端開發和web前端開發有什麼區別呢？既然都是前端開發，兩者肯定有緊密的聯系，移動前端開發和web前端開發其實都屬於前端開發的范圍，目前前端發展的趨勢就是大前端，可以說是包羅萬象，當然也就包含PC端和移動端領域，而現在的前端開發人員也已早就不是當年的切圖仔了，需要學習和掌握大前端體系方方面面的知識才能在日常的開發中游刃有餘，但是不論趨勢如何發展，目前來看HTML、CSS和Java依然是整個前端開發的三大基石。不論是想做移動前端開發還是web前端開發，這三樣基礎技術都必須熟練掌握。移動前端開發和web前端開發有什麼區別呢？
1、業務的應用場景
web前端開發主要指傳統的PC端網頁開發，頁面主要是運行在PC端瀏覽器中，移動前端開發出來的頁面主要是運行在手機上；直觀上會感覺，PC端頁面大一些，移動端頁面小一些，但是根據開發經驗，頁面大可並不代表書寫的代碼復雜，頁面小也並不意味著開發簡單，難與易主要還是取決於具體的業務需求。
2、新技術的使用
由於在移動端主要以webkit內核為主，對於HTML5等新技術支持的更好，所以可以更大范圍的使用新技術;而PC端開發由於很多場景下要求兼容IE等老版本瀏覽器，出於瀏覽器兼容性的考慮，有些情況下限制了新技術的使用。
3、頁面的適配性
傳統PC端的頁面開發一般都會選擇給頁面設定一個固定寬度，兩側有留白，但是移動端的頁面由於其載體手機屏幕比PC要小很多，一般都會選擇盡可能多的在手機屏幕上顯示內容，這就要求移動端頁面要能夠充分適應各種屏幕尺寸的手機並進行最大程度的利用。從這一點上來說移動端頁面的適配難度更高一些。
4、頁面的性能
PC端的網路情況一般比較穩定，都是通過網線或者Wi-Fi連接網路;但是移動端就比較復雜，除了Wi-Fi，還有2G、3G、4G甚至是在幾種不同的網路連接中交替切換也經常發生，不穩定的網路連接對頁面性能帶來的挑戰是移動端的頁面資源不能太大，否則在惡劣網路情況下時，頁面將會無法訪問，嚴重影響用戶體驗。移動前端開發和web前端開發有什麼區別
5、框架選型
由於移動端網路情況的不穩定，導致我們在移動端頁面框架選型時，一般只考慮小而美的框架，例如像zepto.js這樣的壓縮之後只有9.6K，就能滿足一般業務的需要，如果是想要構建更復雜的單頁面應用，可以選擇像vue.js這樣的框架，功能強大，但體積壓縮後卻只有20多K。而web端相對選擇的范圍就比較大，一些比較重型的框架也可以根據項目需求加以考慮，例如古老但龐大的ext.js，依然憑借著眾多UI組件活躍在一些企

『伍』移動前端開發和web前端開發有什麼區別

移動前端開發和 Web 前端開發的區別是:
1、前端是相對比較大的概念，一般是指用戶能夠看到、直接接觸的界面都算是前端，比如iOS界面，安卓界面，網頁界面，PC/Mac桌面軟體的界面。最常見的是Web前端，也就是針對於網頁端開發的工作。

2、Web App即Web application，也就是以瀏覽器作為客戶端的軟體。例如，用桌面客戶端來收發郵件，但也可以直接用瀏覽器登陸gmail或者QQ郵箱，直接使用網頁版的軟體來使用。總之就是使用網頁版代替本地軟體。
Mobile Web App就是在手機端打開的Web App。例如Gmail的移動端軟體

3、目前，移動客戶端的開發主要包括三種類型：
Native App（原生APP）：也就是完全使用移動設備系統語言寫的客戶端。iOS系統就是使用Objective-C語言來編寫本地應用，也可以使用蘋果於2014年蘋果開發者大會上發布的SWIFT語言；Android平台就是使用Java語言來開發。原生APP就是從界面到交互都是使用官方標准語言來編寫，效率和穩定性都是最好的，但欠缺靈活性。
Web App：這個就是在移動瀏覽器里打開的，使用Web前端開發語言HTML CSS JavaScript來開發的，基本上就是個網頁，
Hybrid App：主要使用HTML5實現。一般使用Native語言實現一個容器，然後使用HTML CSS JS來實現用戶界面和交互。這樣方式既克服了Web App容器暴露偏底層的介面這樣的問題，同時比起原生的開發靈活性要高。這樣就更新可以更方便快捷，也不依賴於市場。例如，豌豆莢其實是個PC端的hybrid app 。
對於以上三種開發方式的比較和分析搜索引擎裡面有太多的內容了，這里也就不再贅述了。

4、移動端網頁布局方法與pc的差異。
主要是css方面，外加如何做到同一url，不同客戶端展現不一致的做法，俗稱pc和mobile都兼容。還有會說一下rem的相關用法和一段比較經典的rem.js

最後總結一下：
其實這兩者最顯著的區別就是，web app是不依賴於具體的設備的，通用性較強，只要手機或PC有相應內核的瀏覽器就基本OK。而mobile的app則依賴於具體的設備，一旦更換設備，需要重新下載才能繼續使用。
移動前端開發主要來說的是Native Client的開發Android為Java，iOS為Objective-C，然後么HTML5應用號稱跨平台其實差異很大。
Web前端開發么基本上就是HTML JavaScript CSS，不過有些人把Servelt/JSP, PHP,Ruby,Python,C#之類的只要關繫到頁面的也叫做Web前端開發。
app是應用，每個操作系統有專門的開發工具和語言
web是網頁，使用html+css+js，有工具可以生成轉化為app，不過效果一般

『陸』 Web端測試和移動端APP測試在操作特性上有什麼區分

區分方法匯總：

1、記錄bug

在Web端可以通過系統自帶的截圖和QQ截圖等方式來截取bug的圖片，對於錯誤的地方可以用工具自帶的標識來重點標記。
對於移動端設備可以用手機自帶的截圖工具來截圖然後傳到電腦上，個人一般習慣安裝微信的windows版本，通過文件傳輸助手發送到PC端。

2、測試環境

Web端的測試環境很多時候是通過hosts進行切換，switchhosts工具可以方便的切換需要的host。
移動端設置起來比較復雜，比較簡單的方式是電腦端設置代理，手機端直接連接代理。

3、兼容性

web端的測試一般都是主要使用一種瀏覽器，待系統基本穩定的時候，再去專門測試瀏覽器的兼容性。
移動端主要分為安卓和IOS，而這兩端出現的問題一般是不一致的，一致的問題主要是數據問題，這時候是需要後台處理的。

移動端與web端相比較來說，移動端有很多自己的特性，無線網路、2G、3G、4G等，斷網、網速較差及網路之間的切換時頁面的顯示等，這些對於移動端來說很重要。此外，在非wifi下，還需要注意網路使用量問題。

『柒』移動前端開發和web前端開發的區別

移動前端開發和web前端開發其實都屬於前端開發的范圍，目前前端發展的趨勢就是大前端
那麼他們的區別在哪呢？我給你分析一下：
1、新技術的使用
目前移動終端主要以Webkit內核為中心，更好地支持HTML5等新技術，讓新技術得到更廣泛的應用。但是PC終端的開發需要兼容IE等老瀏覽器，所以新技術的應用必須考慮瀏覽器的兼容性。
2、業務的應用場景
Web前端開發主要是指傳統的在電腦端開發網頁，網頁主要運行在PC端，而手機端開發的網頁運行在手機端。這兩者沒有區別，孰難孰易。開發難度主要看業務需求。
3、頁面的適配性
在傳統的PC端頁面開發中，需要為頁面設置固定的寬度，以確保兩側都有頁邊距。但是移動頁面會選擇在手機屏幕上顯示盡可能多的內容，因為它的運營商手機屏幕比PC端小得多。這時候就要求移動頁面要能完全適應各種屏幕尺寸的手機，最大限度地利用。從這個頁面的適應性來看，移動端比PC端更難。
4、頁面的性能
一般情況下， PC端的網路通過網線或 WIFI與網路相連，而移動端則比較復雜。除 WIFI外，還有2 G、3 G、4 G、5 G，甚至常常會有多個不同網路連接間的切換。因此， PC端的網路狀況將比移動端更加穩定。移動端的頁面資源不能太大，否則當網路狀況不好時，頁面無法訪問，這對網頁性能造成了很大的影響。
以上就是我給你分享的關於移動前端和web前端的區別，希望我的回答對你有所幫助

『捌』 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 的


一般在head中添加這幾個之後，移動端就沒有什麼大問題了，希望對你有幫助，望採納！

『玖』打包的APP裡面的web頁面是使用移動端默認的瀏覽器，還是移動端自帶的瀏覽器兼容性主要注意什麼

之前默認使用的系統內置瀏覽器對象，去年應該已經在Android切換為第三方瀏覽器內核了。兼容性基本不用考慮，不需要考慮media query了等等適配工作。基於參考要求，在任意一個終端上開發，在所有終端上都會有統一的展現。基於em相對字體大小技術+屏幕DPI適配。

『拾』前端面試題，移動端兼容問題有哪些，安卓和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兼容性

與移動端web兼容性相關的內容