魅族手機瀏覽器兼容性調優最佳實踐_html/css
來源：懂視網
責編：小采
時間：2020-11-27 16:14:31
魅族手機瀏覽器兼容性調優最佳實踐_html/css
魅族手機瀏覽器兼容性調優最佳實踐_html/css_WEB-ITnose:問題一、非 position:absolute 容器 height:100% 不生效，導致 bottom 定位錯位 截圖1：容器實際高度渲染為0 截圖2： 節點1 樣式中包含了 position:relative ; height:100%; 但在魅族手機瀏覽器中高度被渲染為0節點2 定義了 bottom:
導讀魅族手機瀏覽器兼容性調優最佳實踐_html/css_WEB-ITnose:問題一、非 position:absolute 容器 height:100% 不生效，導致 bottom 定位錯位 截圖1：容器實際高度渲染為0 截圖2： 節點1 樣式中包含了 position:relative ; height:100%; 但在魅族手機瀏覽器中高度被渲染為0節點2 定義了 bottom:
問題一、非 position:absolute 容器 height:100% 不生效，導致 bottom 定位錯位
截圖1：容器實際高度渲染為0
截圖2：
節點1 樣式中包含了 position:relative ; height:100%; 但在魅族手機瀏覽器中高度被渲染為0
節點2 定義了 bottom:-140px; 定位出錯
解決方案:
1、節點1使用 position:absolute
2、或 height 寫死為父容器 高度
3、或 節點2 使用 top 定位，為了兼容ie瀏覽器盡量使用 top 代替 bottom 也是一條最佳實踐
問題二、魅族手機瀏覽器中部分段落文字字號會被自動放大
這個是魅族手機瀏覽器（優化閱讀體驗）的特性，當頁面的 contentWidth 大于 800px 時會被瀏覽器視為PC版頁面，從而觸發該邏輯。
關閉該特性的方法是，在最外層的div節點上加上 class="copyr" ，其節點內所有子節點將關閉自動放大字號的特性。需要注意的是加 body 節點上是無效的。
以下是關閉特性后的效果截圖：
暫時只發現以上兩條，如有其他問題會繼續補充，歡迎跟帖反饋：）
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
魅族手機瀏覽器兼容性調優最佳實踐_html/css
魅族手機瀏覽器兼容性調優最佳實踐_html/css_WEB-ITnose:問題一、非 position:absolute 容器 height:100% 不生效，導致 bottom 定位錯位 截圖1：容器實際高度渲染為0 截圖2： 節點1 樣式中包含了 position:relative ; height:100%; 但在魅族手機瀏覽器中高度被渲染為0節點2 定義了 bottom:
