前端媛猿

讀完需要

5分鐘

速讀僅需 3?分鐘

??作者 |?唐宋元明清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值的函數： getScript() { return ` const zoomValue=window.innerWidth / 375; document.documentElement.style.transform="scale("+zoomValue+")"; document.documentElement.style.transformOrigin="left top";?????; }注：以上也可以直接寫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縮放： getScript() {return `const zoomValue=window.innerWidth / 375;document.documentElement.style.zoom = zoomValue;;}emmm，很簡單，調試效果看起來很不錯。模擬機上，看起來都正常~但是坑來了：真機有問題，發現在ipad的safari上，頁面是放大了，但是字段根本就沒變化！原因竟然是：蘋果在ipad的網頁，改動渲染方面的相關規則。有點坑~https://apple.stackexchange.com/questions/377216/css-zoom-does-not-work-ipad-os-v13-latest-safarihttps://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更新：getScript() { return `const zoomValue=window.innerWidth / 375;var viewport = document.querySelector("meta[name=viewport]");viewport.content="width=device-width,initial-scale="+zoomValue+", maximum-scale="+zoomValue+", minimum-scale="+zoomValue+",user-scalable=no, minimal-ui"?; }運行代碼，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{/* app contentAutoFit */} 自適應可執行代碼文本。 //返回自適應html字符串 getZoomScript() { return ` const zoomValue = window.innerWidth / 375; const userAgentInfo = window.clientInformation.appVersion; //如果是ipad if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) { //內容自適應 - 設置transform-scale。 //fixed布局時需要修改下left/margin-left等，同時窗口的寬高無法準確獲取，需要除以比例,詳見windowSizeWithScaleHelper //ipad有遺留問題：微信瀏覽器加載時，橫豎屏切換一瞬間，有空白問題。不過可以忽略~ document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")"; document.documentElement.style.transformOrigin = "left top"; var html = document.querySelector("html"); html.style.width = '375px'; html.style.overflow = 'hidden'; html.style.overflowY = 'auto'; } else { //內容自適應 - 設置zoom。通過zoom來縮放界面，在ipad的safari瀏覽器等會存在字體無法縮放的兼容問題。 document.documentElement.style.zoom = zoomValue; } // 內容自適應 - 設置viewport,整體okay。但是ipad的水平滾動條無法解決 // var viewport = document.querySelector("meta[name=viewport]"); // viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui" `; }2. 添加加載及界面變更刷新機制

• 微信瀏覽器橫豎屏切換時，某些機型不會觸發窗口大小變更，所以需要額外添加orientationchange監聽

• 加載過程中，微信瀏覽器切換橫豎屏會有顯示問題，需要加載完成后適配

componentDidMount() { //window.onresize = this.adjustContentAutoFit; //解決微信橫豎屏問題 window.addEventListener("orientationchange", this.adjustContentAutoFit); //解決加載過程中,切換橫豎屏,導致界面沒有適配的問題 this.adjustContentAutoFit(); } componentWillUnmount() { window.removeEventListener("orientationchange", this.adjustContentAutoFit); } //監聽窗口尺寸變更，刷新自適應 adjustContentAutoFit() { const zoomValue = window.innerWidth / 375; const userAgentInfo = window.clientInformation.appVersion; //如果是ipad if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) { //內容自適應 - 設置transform-scale。 //fixed布局時需要修改下left/margin-left等，同時窗口的寬高無法準確獲取，需要除以比例,詳見windowSizeWithScaleHelper //ipad有遺留問題：微信瀏覽器，橫豎屏切換時，有些機型在打開一瞬間，有空白問題。不過可以忽略~ document.documentElement.style.transform = "scale(" + zoomValue + "," + (zoomValue < 1 ? 1 : zoomValue) + ")"; document.documentElement.style.transformOrigin = "left top"; var html = document.querySelector("html") as HTMLElement; html.style.width = '375px'; html.style.overflow = 'hidden'; html.style.overflowY = 'auto'; } else { // 內容自適應 - 設置zoom。通過zoom來縮放界面，在ipad的safari瀏覽器等會存在字體無法縮放的兼容問題。 document.documentElement.style.zoom = zoomValue; } // 內容自適應 - 設置viewport,整體okay。但是ipad的水平滾動條無法解決 // var viewport = document.querySelector("meta[name=viewport]"); // viewport.content = "width=device-width,initial-scale=" + zoomValue + ", maximum-scale=" + zoomValue + ", minimum-scale=" + zoomValue + ",user-scalable=no, minimal-ui" }此方案的一些小遺留問題：

• ipad不支持position:fixed，所以無法實現標題欄置頂等功能

• 微信瀏覽器，橫豎屏切換時，有些機型在打開一瞬間，有空白問題

參考：

• IOS環境下固定定位position:fixed帶來的問題與解決方案

• 小技巧css解決移動端ios不兼容position:fixed屬性，無需插件

• 踩坑路上——IOS Safari瀏覽器下固定定位position:fixed帶來的問題與解決方案

• iphone safari不支持position fixed的解決辦法

• orientationchange事件、監測微信移動端橫豎屏

本文完~文章精選1、vue修飾符--可能是東半球最詳細的文檔(滑稽)2、JavaScript 已被淘汰？3、Angular 發布首個正式的路線圖

更多精彩等待你的發現點分享點點贊點在看

總結

以上是生活随笔為你收集整理的地图容器自适应浏览器是什么意思_Web移动端实现自适应缩放界面的方法汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。