【W(wǎng)eb技術(shù)】706- 移動(dòng)端實(shí)現(xiàn)自適應(yīng)縮放界面的方法匯總

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

  width: 375px;  height: auto;

const scaleValue=window.innerWidth / 375

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

1. 項(xiàng)目設(shè)置的absolue元素width 100%失效了 -- 可以設(shè)置固定的寬度解決

2. 彈框position=fixed位置飛到天邊去了 -- 這個(gè)無法規(guī)避。

• transform限制position:fixed的跟隨效果

• 關(guān)于在transform下的子元素設(shè)置fixed無效的困惑

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

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 */} 

  //返回自適應(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;     //如果是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í)，有些機(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ī)型在打開一瞬間，有空白問題

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

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

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

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

• orientationchange事件、監(jiān)測微信移動(dòng)端橫豎屏