作者 | 唐宋元明清2188 來源 | http://www.cnblogs.com/kybs0/ 在開發App端的網頁時，要适配iphone、ipad、ipod、安卓等各種機型，一般是直接使用em、px轉em、界面縮放。 本章是通過将界面縮放，等比例顯示在各機型上。過程中遇到了些問題和大坑~ 然後下面是具體的自适應實作方式的嘗試~
方案一：設定tranform/scale
首先設定内容固定寬度、自動高度(以下舉例)
width: 375px; height: auto;
通過擷取視窗的寬度與固定寬度相除，獲得縮放比例
const scaleValue=window.innerWidth / 375
在html層，添加一段script： 添加一段設定zoom值的函數：
注： 以上也可以直接寫script，我上面傳回一段html是因為項目是通過服務端渲染的。 樣式的設定必須在界面加載之前，否則會因界面顯示變更出現閃現問題。 因為添加了服務端渲染，是以無法在界面一開始初始時，無法擷取window、document等對象。而上面html的注入，對服務端渲染機制的一個黑科技~ 上面的方案完成後，看看效果。然後坑出來了：
- 項目設定的absolue元素width 100%失效了 -- 可以設定固定的寬度解決
- 彈框position=fixed位置飛到天邊去了 -- 這個無法規避。
網上找到了一篇文章 CSS3 transform對普通元素的N多渲染影響 ，介紹了transform的一堆坑。 我這個項目一些布局需要position=fixed，是以tranform不适合~放棄 這個坑的其它介紹可以參考下：
- transform限制position:fixed的跟随效果
- 關于在transform下的子元素設定fixed無效的困惑
總結：
- position:fixed不支援，是以想做标題欄置頂，上面方案是無法實作的。
- ipad有遺留問題：微信浏覽器，橫豎屏切換時，有些機型在打開一瞬間，橫向拖動有空白問題。這個問題無法處理~
- 以上方案因為使用了scale，同時視窗的寬高window.innerHeight無法準确擷取，需要除以比例,比如: window.innerHeight / (window.innerWidth / 375)
方案二：設定zoom
在上一個方案的基礎上，嘗試zoom縮放：
emmm，很簡單，調試效果看起來很不錯。模拟機上，看起來都正常~ 但是坑來了：真機有問題，發現在ipad的safari上，頁面是放大了，但是字段根本就沒變化！ 原因竟然是：蘋果在ipad的網頁，改動渲染方面的相關規則。有點坑~ https://apple.stackexchange.com/questions/377216/css-zoom-does-not-work-ipad-os-v13-latest-safari https://stackoverflow.com/questions/7907760/why-the-font-size-wont-change-with-browser-zoom-in 實作沒辦法，我後面嘗試， 通過userAgent對ipad機型(ipad、macintosh)特殊處理，直接擷取所有包含了文字的div、p、span等元素，放大font-size。 發現可以處理，沒毛病！但是也有些缺陷，沒辦法在一開始處理字型，因為元素還沒有初始化，而等界面加載後再刷字型大小，界面會閃現一次。
方案三：設定viewport-scare
在html中添加預設viewport：
ps：minimal-ui 與本文無關，它可以在safari加載網頁時隐藏位址欄與導航欄 添加viewport更新：
運作代碼，emmm，有一些小問題。
- margin:auto，在某些布局下會讓頁面偏移 -- 删除就好
- 設定background-image的區域，背景圖檔并沒有填充滿 -- 添加width：100%解決
- position：fixed，寬高顯示有問題 -- 設定固定寬度，比如375px，固定高度；如果需要全屏，可以使用height: 100vh。
fixed布局建議：以彈框為例 添加fixed布局的容器，水準豎直方向靠邊距離分别設定一個就行了，left:0,bottom:0。 然後添加absolute布局的内容容器.如果需要居中，可以在js中設定bottom=window.innerHeight / 2 - 元素的高度/2 總結：
- 以上方案不支援fixed布局，修改完成後，ipad的水準滾動條依然存在，無法解決
相容适配
采用第二個zoom縮放方案，同時對ipad機型特殊處理，另外采用scale縮放方案。 完整代碼如下： 1. 初始化适配(支援服務端渲染) html-header添加script
自适應可執行代碼文本。
2. 添加加載及界面變更重新整理機制
- 微信浏覽器橫豎屏切換時，某些機型不會觸發視窗大小變更，是以需要額外添加orientationchange監聽
- 加載過程中，微信浏覽器切換橫豎屏會有顯示問題，需要加載完成後适配
此方案的一些小遺留問題：
- ipad不支援position:fixed，是以無法實作标題欄置頂等功能
- 微信浏覽器，橫豎屏切換時，有些機型在打開一瞬間，有空白問題
參考：
- IOS環境下固定定位position:fixed帶來的問題與解決方案
- 小技巧css解決移動端ios不相容position:fixed屬性，無需插件
- 踩坑路上——IOS Safari浏覽器下固定定位position:fixed帶來的問題與解決方案
- iphone safari不支援position fixed的解決辦法
- orientationchange事件、監測微信移動端橫豎屏
本文完~
