魅族手機瀏覽器安全色性調優最佳實務，相容性調優最佳實務

魅族手機瀏覽器安全色性調優最佳實務，相容性調優最佳實務
問題一、非 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 節點上是無效的。

以下是關閉特性後的效果：

 

暫時只發現以上兩條，如有其他問題會繼續補充，歡迎跟帖反饋：）