移动端与pc端的区别 及 ios的 兼容性问题
前言：這里移動端主要指 hybrid app 中的H5頁面。app 中對頁面 樣式和功能 的需求會更精細一點。
1、適配： 手機端的尺寸多樣，3.5英寸的 iPhone4應該是最小的，只要考慮?兼容到iPhone4?就可以了。（iPhone4的用戶量現在也很少，有時只要?兼容到iPhone5?就可以了）
? 哪怕有比這個尺寸小的，都不是多人使用的。可能是個位數，甚至是沒有。為數不多的幾款這樣的手機處理能力也很低下。? ? ? ?https://digi.tech.qq.com/a/20150312/011872.htm#p=1
? iPhone4 使用情況：iPhone4的系統， 現在的很多軟件都運行不了。??https://www.pc841.com/shouji/iPhone/19249.html(系統升級后也會有問題，大部分用戶是不會去升級的)? 或??https://t.cj.sina.com.cn/articles/view/2972527830/b12d2cd60010084gl
總結：
? ? ? ? ? ? ? rem + 媒體查詢 適配（rem基本可以適配大部分的移動端的適配，解決不了的使用媒體查詢基本可以解決），重點熟練下媒體查詢手機是用height還是device-height來查詢的。有的手機，下面有一條黑色的手機按鍵，此時的device-height有沒有包含這塊高度。
? ? ? ? ? ? ? 注：不同手機寬度基本沒什么適配的，rem基本就解決了。主要是針對需要一屏顯示的頁面，高度差距太大，用rem基本沒什么效果。
2、 JS 呼起和隱藏鍵盤（默認是需要用戶點擊輸入框才能呼起）： 智能機的鍵盤都是軟鍵盤。應用中有呼起鍵盤和隱藏鍵盤的需求。
? 呼起鍵盤：進入搜索頁,要求鍵盤拉起。主要聚焦到input框就可以。（安卓上沒有問題，ios上無效）
this.$refs.input.focus() // 在一個demo上安卓 和 ios都有效，但是正式項目中，ios中無效? 隱藏鍵盤：通過給input標簽，設置?readonly 屬性就可以使鍵盤收起來了。（安卓上沒有問題，ios上無效）
<input type="text" ref="input" :readonly="readonly">或，下面的方法 安卓 和 ios上都有效
this.$refs.input.blur()3、軟鍵盤呼起引起 webview高度變小 的問題（安卓的問題）：
問題原因：
安卓手機：同一個手機，H5頁面的?視口高度在鍵盤拉起和隱藏時，不一樣的。拉起時，鍵盤部分的高度變成原生的內容了，H5容器高度就變小了。（H5頁面本身的高度是不變的）
? 一般情況這個都不影響，但是如果底部有fixed定位的話。鍵盤拉起時，會把這塊內容也移上去的，需要做一個判斷進行隱藏。
ios手機：更不正常，鍵盤彈出不影響H5容器的大小變化的，即clientHeight的大小不變，但是卻出現了滾動（如果clientHeight同步變小，可以理解為變成了一個小屏的容器。但是ios這樣，只是把滾動條的范圍變小了；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?滾動條到底了，頁面的底部在鍵盤的上了。鍵盤遮擋的部分也是屬于clientHeight，這一部分的高度，憑空給H5頁面了）。總結起來就，ios中鍵盤彈起，會給H5頁面的高度增加了一個鍵盤的高度。
參考哪些高度發生的變化??https://blog.csdn.net/weixin_34163553/article/details/88686238
個人看法：鍵盤彈出，可以這樣理解為h5的底板的大小就是webview的大小，包括鍵盤。底板上一張畫布，畫布高度可以被撐高，html、body等元素是固定在畫布上的。瀏覽器中頁面的滾動的跟著畫布滾動的。
安卓上，畫布的最小高度是底板不包括鍵盤的高度； ios上，畫布的最小高度是低板的高度加上鍵盤的高度。（css無非操作畫布的屬性）
解決問題：
頁面只能是一屏的：這個要考慮自適應。鍵盤呼起，webview的高度變小了。使用 absolute 定位，bottom 設置，定位參考的元素高度不能受webview高度的影響；或者使用top設置高度。
如果，要考慮所有手機中 底部的按鈕必須離底部相同的距離。這個可能就要使用js獲取 沒有鍵盤時屏幕的高度。然后把 定位參考 元素高度設置為這個值。
頁面可以滾動：這個比較簡單，只要頁面的高度 大于 呼起鍵盤后 的高度。就沒有任何的問題。
?4、ios輸入框，點擊呼起鍵盤不敏感
5、?fixed元素 軟鍵盤喚起時fixed失效（fixed+input，ios的問題）：（有一個inobounce插件，可以直接解決這個問題。功能上相當于使得畫布的高度，始終等于鍵盤上面到頂部的高度。不管鍵盤有沒有出來都這樣。有時間可以看下源碼）
a、頂部 fixed元素，input框在頂部：點擊這個input框，fixed雖然失效了，但是頁面不會滾動。fiexd元素會滾動是因為軟鍵盤的彈出，fixed失效了（或變成了absolute），只要input失去焦點時，立刻把鍵盤關閉，fixed元素就沒有滾動的機會。
這樣就可以解決fixed無效的問題了。
中間部分有滾動部分的解決方案，有效 https://www.iteye.com/blog/570109268-2406086（解決了中間滾動部分的高度，不會引起畫布的滾動。畫布的滾動，還是會使fixed滾動，這個解決方法就是上面說的失去焦點，隱藏鍵盤）
b、底部 fixed元素，input框在底部：這個input輸入框，點擊這個輸入框，頁面都會向上滾動的。input框始終在鍵盤上面，鍵盤關閉，滾上去的頁面也不會滾下來。有時間研究下解決方案
6、解決頁面，返回時重復的問題 （重要，app中返回是經常會用到的，所以瀏覽器歷史記錄需要頁面控制下。頁面前進或回退時，url只是參數的改變，頁面是不刷新的）
A（列表頁） =》 B（詳情頁，B中有跳到A頁面的按鈕）：列表A1 =》 B 點擊跳到A的按鈕 =》?
? ?列表A2? =》B。這個時候回退時，B=》A=》B=>A 會出現不斷重復的問題
解決方案：使用vue路由的 vm.$router.replace() 方法跳轉，或 原生的?location.replace(URL)?
7、input中占位文字，無法上下居中對齊（應該是字體小于12px，引起的問題）。
8、ios監聽軟鍵盤確認按鈕：會無效（那個?確認?按鈕會變化 為換行?按鈕，換行時，監聽key=13是對的。變成確認時，監聽不了key=13的這個鍵。【猜測可能同一個鍵，確認的鍵盤碼不是13】）
? 解決辦法：?type="search"? 的輸入控件，會使改變軟鍵盤確認按鈕的文字變成搜索（且鍵盤碼都是13）。https://blog.csdn.net/sinat_24070543/article/details/53423274?
<form action=""> // form 標簽必須加 <input v-model="wordName" type="search" placeholder="輸入垃圾名稱搜一搜" @input="inputText" ref="input"/> </form>這個方法可以不用監聽key=13事件，直接監聽form的 submit 事件同樣可以監聽 確認按鈕。
（項目中是 在 搜索框 右邊加一個 搜索按鈕，不使用軟鍵盤上的確認按鈕）
另：type=search表單，輸入文字后，右邊會有一個刪除文字按鈕的。解決方案：https://www.cnblogs.com/xiaoshen666/p/10772858.html
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none; }9、不同的手機系統，html的某些標簽的默認樣式是不一樣的，開發要統一樣式就需要自己寫，而去掉默認的樣式。（如，input [type="radio"] 單選框，alert，不同的系統中默認樣式是不一樣的）
10、小高度標簽內?單行文本 垂直居中 偏上的解決方案（安卓設備上）：https://blog.csdn.net/zhanghuanhuan1/article/details/80339610? 或??https://blog.csdn.net/liming911911/article/details/75389188（推薦）
原因（個人猜測）：移動端是支持12px以下的字體的。安卓上小于12px的字體，字體會溢出標簽一點。親測，如下圖，字體設置為10px，字體溢出他的包含標簽sapn。即，
? ?瀏覽器12px以下的字體 以12px顯示；移動端小于12px的字體，也可以正常顯示，但是排版有點小問題（會上移）。
常規的居中方案都沒有用的，使用scale可以近似解決，但是不夠完美。目前沒有其他的可行方法。或者使用媒體查詢，小于12px的尺寸，就以12px顯示。折騰了好久，找不到好的辦法
11、ios上vue框架中返回?keep-alive 的頁面(這個頁面比較長，有滾動。滾到頂部，進入下一個頁面)，會出現白屏（被什么東西遮擋住了）。手輕輕滑動下，遮擋層就消失了。
原因及解決方法：https://blog.csdn.net/m0_38069630/article/details/80573283?（公司的項目中因為是多人開發，不好動html, body的屬性。所以沒用這個解決方案，只是不用 keep-alive 了）
12、禁止ios瀏覽器頁面滾動的橡皮筋效果(有回彈的效果)：https://blog.csdn.net/m0_37068028/article/details/80183781?（親測，兩個方案都有效）
13、ios中 h5頁面 輸入框點擊空白處不會失去焦點 軟鍵盤不會收起（重要）：
解決方案：https://www.cnblogs.com/gd-dql/p/7476330.html（親測有效，里面使用touchend觸發，改成touchstart更好。有時間整理下，把里面的定時去掉）
14、ios-H5 中，不過頁面的高度是多少(html,body設置為50px，只有一個input標簽)，只要鍵盤彈出，頁面就一定會滾動 。通過上面的方法，input失去焦點馬上隱藏鍵盤。這樣活動的時候鍵盤隱藏，頁面就不會滾動了。
但是，在input內部滑動，還是會帶動頁面滾動的，給input標簽添加一個touchmove阻止默認事件。就完美了
document.getElementById('input').addEventListener("touchmove",function(event){event.preventDefault() },false)（直接讓頁面不滾動，暫時沒有找到解決方案，因為html，body的高度根本沒有超出鍵盤的范圍。我想應該是有直接的解決辦法的，百度H5頁面，不知道是怎么解決的，有時間研究下）
?15、禁止 ios?頁面上下滾動回彈（橡皮筋效果）：沒有橡皮筋效果，就不會出現fixed失效的問題。
解決方案、使用?inobounce.js 插件（親測有效）。但是 整個頁面都不能滑動了，有溢出的屏幕的元素也不能滑動的。
? 如果有需要滑動的元素，需要設置一個height或max-height,還有overflow: auto; -webkit-overflow-scrolling: touch;?? ??https://blog.csdn.net/weixin_30610755/article/details/95260237
說明：通過閱讀?inobounce.js 的源碼（源碼代碼量很少），發現 原理就是使用window代理屏幕上的 touchmove 事件( window.addEventListener)。判斷當前觸發的對象是非滾動區域，則阻止事件的默認行為；滾動區域，不阻止事件。
具體實現，插件中考慮的比較全面，比較復雜。直接使用插件是最方便的。
?文章閱讀
1、移動端項目實戰心得： 參考鏈接
?移動端事件：?https://www.jianshu.com/p/201518903985（原生的沒有 tap 和 swipe 事件）
1、touch事件：
touchstart：手指觸摸到屏幕會觸發
touchmove：當手指在屏幕上移動時，會觸發
touchend：當手指離開屏幕時，會觸發。
touchcancel：可由系統進行的觸發，比如手指觸摸屏幕的時候，突然alert了一下，或者系統中其他打斷了touch的行為，則可以觸發該事件。（在瀏覽器的模擬器中觸發touchcancel事件，Alt+Tab鍵）
? ? ?注意：使用 touchend 事件時，一定要考慮touchcancel事件。比如，語音功能。按下說話，突然彈出 語音權限未開。這個時候手指拿開就不會觸發touchend事件了，touch事件被打斷了，屏幕上一直是touchstart的狀態。
? ??必須加上 touchcancel 事件，補充 手指拿開后的頁面狀態。
移動端各種高度：（在pc上，瀏覽的高度對用戶基本什么問題。但是在移動端瀏覽的各種高度問題。比如webview的高度，是否包含軟鍵盤，不同的系統有差異性。微信的H5頁面，底部有左右前進按鈕欄，webview的高度是否又包含這個）
參考：https://segmentfault.com/a/1190000010443608?或?https://www.jianshu.com/p/27b68f780054?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
1、window.outerHeight：【不常用】窗口的外部高度，包括所有界面元素（如工具欄/滾動條）。手機端，這個值和innerHeight一樣。
2、window.innerHeight：【一般】瀏覽器窗口高度（包括橫向滾動條的高度，沒有橫向滾動條，和documentElement.clientHeight是一樣的。https://www.cnblogs.com/suihang/p/11177093.html?）。（ios中軟鍵盤彈出時，有兩個值）
3、body.offsetHeight：【不用】網頁可見區域高（不確定具體的含義，值和scrollHeight一樣。）。
4、body.clientHeight(兼容問題)：瀏覽器窗口高度（不包括橫向滾動條）。（不同瀏覽器表達方式不一樣，谷歌中他的值無效。使用?documentElement.clientHeight【常用】）
5、body.scrollHeight(兼容問題)：網頁正文?全文高。可以理解為畫布的高度。（谷歌中他的值表示body的高度，使用 documentElement.scrollHeight【常用】。https://www.cnblogs.com/nanshanlaoyao/p/5964730.html）
6、body.scrollTop(兼容問題)：滾動條在Y軸上的滾動距離，即文檔上邊出去的高度。（谷歌、火狐上都為0，使用 documentElement.scrollTop【常用】?。https://www.jianshu.com/p/4c37a2a56586）
? 兼容性解決方案：https://www.cnblogs.com/winyh/p/6715010.html
7、window.screenTop：【不常用】窗口相對于屏幕的Y坐標。即瀏覽器頂部距離顯示器頂部的距離。https://www.w3cschool.cn/jsref/prop-win-screenleft.html
8、screen.height：【不常用】屏幕分辨率的高，即顯示器的高度。
9、screen.availHeight：【不常用】顯示器除去底部任務欄后的高度。https://www.w3school.com.cn/jsref/prop_screen_availheight.asp
| 各種高度 | 鍵盤沒有彈出(安卓) | 鍵盤彈出后（安卓） | ? | 鍵盤沒有彈出(ios) | 鍵盤彈出后（ios） | ? | 微信網頁底部左右箭頭欄隱藏（ios） | 微信網頁底部左右箭頭欄顯示（ios） |
| window.outerHeight | 647 | 380 | ? | ?603 | ?603 | ? | ? | ? |
| window.innerHeight | 647? | 380? | ? | 603? | 603，293（滾動到底部）? | ? | ? | ? |
| body.offsetHeight | 771? | 771? | ? | 793? | 793? | ? | ? | ? |
| body.clientHeight | 771? | 771 | ? | 793? | 793? | ? | ? | ? |
| body.scrollHeight | 795? | 795 | ? | 817? | 817? | ? | ? | ? |
| body.scrollTop | 0? | 68? | ? | 0? | 0? | ? | ? | ? |
| window.screenTop | 0? | 0? | ? | 0? | 0? | ? | ? | ? |
| screen.height | 720? | 720? | ? | 667? | 667? | ? | ? | ? |
| screen.availHeight | 720? | 720? | ? | 667? | 667? | ? | ? | ? |
?
?
?
轉載于:https://www.cnblogs.com/wfblog/p/11403460.html
總結
以上是生活随笔為你收集整理的移动端与pc端的区别 及 ios的 兼容性问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java内存缓存-通过Map定制简单缓存
- 下一篇： TCP/IP协议 和 如何实现 互联网上