精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

在開發(fā)App端的網(wǎng)頁時(shí)，要適配iphone、ipad、ipod、安卓等各種機(jī)型，一般是直接使用em、px轉(zhuǎn)em、界面縮放。

本章是通過將界面縮放，等比例顯示在各機(jī)型上。過程中遇到了些問題和大坑~

然后下面是具體的自適應(yīng)實(shí)現(xiàn)方式的嘗試~

方案一：設(shè)置tranform/scale

首先設(shè)置內(nèi)容固定寬度、自動(dòng)高度（以下舉例）

  width: 375px;  height: auto;

通過獲取窗口的寬度與固定寬度相除，獲得縮放比例

const scaleValue=window.innerWidth / 375

在html層，添加一段script：

<script dangerouslySetInnerHTML={{ __html: this.getScript() }}></script>

添加一段設(shè)置zoom值的函數(shù)：

 getScript() {    return `      const zoomValue=window.innerWidth / 375;      document.documentElement.style.transform="scale("+zoomValue+")";      document.documentElement.style.transformOrigin="left top";     ;  }

注：

以上也可以直接寫script，我上面返回一段html是因?yàn)轫?xiàng)目是通過服務(wù)端渲染的。

樣式的設(shè)置必須在界面加載之前，否則會(huì)因界面顯示變更出現(xiàn)閃現(xiàn)問題。

因?yàn)樘砑恿朔?wù)端渲染，所以無法在界面一開始初始時(shí)，無法獲取window、document等對(duì)象。而上面html的注入，對(duì)服務(wù)端渲染機(jī)制的一個(gè)黑科技~

上面的方案完成后，看看效果。然后坑出來了：

1. 項(xiàng)目設(shè)置的absolue元素width 100%失效了 -- 可以設(shè)置固定的寬度解決
2. 彈框position=fixed位置飛到天邊去了 -- 這個(gè)無法規(guī)避。

1. position:fixed不支持，所以想做標(biāo)題欄置頂，上面方案是無法實(shí)現(xiàn)的。
2. ipad有遺留問題：微信瀏覽器，橫豎屏切換時(shí)，有些機(jī)型在打開一瞬間，橫向拖動(dòng)有空白問題。這個(gè)問題無法處理~
3. 以上方案因?yàn)槭褂昧藄cale，同時(shí)窗口的寬高window.innerHeight無法準(zhǔn)確獲取，需要除以比例,比如: window.innerHeight / (window.innerWidth / 375)

方案二：設(shè)置zoom

 getScript() {return `const zoomValue=window.innerWidth / 375;document.documentElement.style.zoom = zoomValue;;}

方案三：設(shè)置viewport-scare

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no, minimal-ui"></meta>

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" ; }

• margin:auto，在某些布局下會(huì)讓頁面偏移 -- 刪除就好
• 設(shè)置background-image的區(qū)域，背景圖片并沒有填充滿 -- 添加width：100%解決
• position：fixed，寬高顯示有問題 -- 設(shè)置固定寬度，比如375px，固定高度；如果需要全屏，可以使用height: 100vh。

• 以上方案不支持fixed布局，修改完成后，ipad的水平滾動(dòng)條依然存在，無法解決

兼容適配

{/* app contentAutoFit */} <script dangerouslySetInnerHTML={{ __html: this.getZoomScript() }}></script>

  //返回自適應(yīng)html字符串  getZoomScript() {   return `      const zoomValue = window.innerWidth / 375;      const userAgentInfo = window.clientInformation.appVersion;      //如果是ipad      if (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) {       //內(nèi)容自適應(yīng) - 設(shè)置transform-scale。        //fixed布局時(shí)需要修改下left/margin-left等，同時(shí)窗口的寬高無法準(zhǔn)確獲取，需要除以比例,詳見windowSizeWithScaleHelper       //ipad有遺留問題：微信瀏覽器加載時(shí)，橫豎屏切換一瞬間，有空白問題。不過可以忽略~       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 {       //內(nèi)容自適應(yīng) - 設(shè)置zoom。通過zoom來縮放界面，在ipad的safari瀏覽器等會(huì)存在字體無法縮放的兼容問題。       document.documentElement.style.zoom = zoomValue;     }     // 內(nèi)容自適應(yīng) - 設(shè)置viewport,整體okay。但是ipad的水平滾動(dòng)條無法解決     // 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"    `; }

• 微信瀏覽器橫豎屏切換時(shí)，某些機(jī)型不會(huì)觸發(fā)窗口大小變更，所以需要額外添加orientationchange監(jiān)聽
• 加載過程中，微信瀏覽器切換橫豎屏?xí)酗@示問題，需要加載完成后適配

 componentDidMount() {//window.onresize = this.adjustContentAutoFit;//解決微信橫豎屏問題window.addEventListener("orientationchange", this.adjustContentAutoFit);//解決加載過程中,切換橫豎屏,導(dǎo)致界面沒有適配的問題this.adjustContentAutoFit();    }    componentWillUnmount() {window.removeEventListener("orientationchange", this.adjustContentAutoFit);   }//監(jiān)聽窗口尺寸變更，刷新自適應(yīng)   adjustContentAutoFit() {const zoomValue = window.innerWidth / 375;const userAgentInfo = window.clientInformation.appVersion;//如果是ipadif (userAgentInfo.indexOf("iPad") != -1 || userAgentInfo.indexOf("Macintosh") != -1) {//內(nèi)容自適應(yīng) - 設(shè)置transform-scale。//fixed布局時(shí)需要修改下left/margin-left等，同時(shí)窗口的寬高無法準(zhǔn)確獲取，需要除以比例,詳見windowSizeWithScaleHelper//ipad有遺留問題：微信瀏覽器，橫豎屏切換時(shí)，有些機(jī)型在打開一瞬間，有空白問題。不過可以忽略~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 {// 內(nèi)容自適應(yīng) - 設(shè)置zoom。通過zoom來縮放界面，在ipad的safari瀏覽器等會(huì)存在字體無法縮放的兼容問題。document.documentElement.style.zoom = zoomValue;    }// 內(nèi)容自適應(yīng) - 設(shè)置viewport,整體okay。但是ipad的水平滾動(dòng)條無法解決// 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，所以無法實(shí)現(xiàn)標(biāo)題欄置頂?shù)裙δ?/span>
• 微信瀏覽器，橫豎屏切換時(shí)，有些機(jī)型在打開一瞬間，有空白問題