方案一： 設定tranform/scale
首先設定內容固定寬度、自動高度（以下舉例）
width
: 375px;
height
: auto;
const scalevalue=window.innerwidth / 375
在html層，新增一段script：
}>
<
/script>
getscript()
以上也可以直接寫script，我上面返回一段html是因為專案是通過服務端渲染的。
樣式的設定必須在介面載入之前，否則會因介面顯示變更出現閃現問題。
因為新增了服務端渲染，所以無法在介面一開始初始時，無法獲取window、document等物件。而上面html的注入，對服務端渲染機制的乙個黑科技~
上面的方案完成後，看看效果。然後坑出來了：
專案設定的absolue元素width 100%失效了 – 可以設定固定的寬度解決
彈框position=fixed位置飛到天邊去了 – 這個無法規避。
網上找到了一篇文章 css3 transform對普通元素的n多渲染影響 ，介紹了transform的一堆坑。
我這個專案一些布局需要position=fixed，所以tranform不適合~放棄
這個坑的其它介紹可以參考下：
transform限制position:fixed的跟隨效果
關於在transform下的子元素設定fixed無效的困惑
總結：position:fixed不支援，所以想做標題欄置頂，上面方案是無法實現的。
以上方案因為使用了scale，同時視窗的寬高window.innerheight無法準確獲取，需要除以比例,比如: window.innerheight / (window.innerwidth / 375)
getscript()
"viewport" content=
"width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no, minimal-ui"
>
<
/meta>
新增viewport更新：
getscript()
margin:auto，在某些布局下會讓頁面偏移 – 刪除就好
position：fixed，寬高顯示有問題 – 設定固定寬度，比如375px，固定高度；如果需要全屏，可以使用height: 100vh。
fixed布局建議：以彈框為例
新增fixed布局的容器，水平豎直方向靠邊距離分別設定乙個就行了，left:0,bottom:0。
然後新增absolute布局的內容容器.如果需要居中，可以在js中設定bottom=window.innerheight / 2 - 元素的高度/2
總結：以上方案不支援fixed布局，修改完成後，ipad的水平滾動條依然存在，無法解決
相容適配
採用第二個zoom縮放方案，同時對ipad機型特殊處理，另外採用scale縮放方案。
完整**如下：
初始化適配（支援服務端渲染）
html-header新增script
}>
<
/script>
自適應可執行**文字。
//返回自適應html字串
getzoomscript()
else
// 內容自適應 - 設定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"
`;}
componentdidmount()
componentwillunmount()
//監聽視窗尺寸變更，重新整理自適應
adjustcontentautofit()
else
// 內容自適應 - 設定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的解決辦法
移動端自適應
1 js動態設定html的字型大小 var clientwidth 0 if document.documentelement.clientwidth 600 else document.documentelement.style.fontsize 50 clientwidth 375 px win...
移動端自適應
width device width width為設定layout viewport 的寬度，為乙個正整數，width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值，可以是乙個帶小數的數字，1.0就是佔網頁的100 mi...
移動端web頁面自適應和rem
web頁面的自適應開發，要求就是跨平台，跨瀏覽器，一般mobile pc，前幾天寫了幾個pc端全屏頁面，用的是百分比，在手機上看了下效果 相去甚遠。這麼看來mobile pc 的自適應 有些時候就是個偽命題。那對於移動端的自適應就 一般的宣傳頁面全屏滑動那種，用百分比，若複雜了就肯定不行，仔細看了下...