頁面解析度相容性處理

2022-09-18 07:42:21 字數 1224 閱讀 8689

目前自己了解兩種辦法:

function

bodyscale()

bodyscale()

;

如果想要不留空白,可以讓背景寬高都為100%鋪滿整個螢幕,然後讓中間的部分垂直居中對齊。

寬高比例1.7777(1920x1080 1600x900 1360x768這個大概 1280x720)

css3新增的元素,使用rem為元素設定字型大小時,相對大小對比的是html根元素

,只修改根元素就成比例地調整所有字型大小,除了ie8及更早版本外,所有瀏覽器均已支援rem。

第一步:先設定header裡面的meta標籤和script標籤

"viewport" content=

"initial-scale=1,maximum-scale=1, minimum-scale=1"

>

"text/j**ascript"

>

document.documentelement.style.fontsize = document.documentelement.clientwidth /

1920

*100

+'px'

; = window.screen.width / 1920 * 100 + 'px';

<

/script>

window.screen.width / 1920是計算當前螢幕和設計稿的比例大小,比如解析度是960px,那麼這個值應該為0.5。

之所以乘以100,是因為一般瀏覽器的最小字型是12px,如果這個數值就小於12px,會造成一些計算的錯誤,和一些奇怪的問題。注意谷歌瀏覽器支援的最小font-size大小為12px(如果有小於12px可以使用火狐檢視)。

因為前面根元素乘以100,所以如果在960寬度解析度裡(此時根元素font-size為50px)乙個設計稿div寬度為960px,那麼應該除以100設定成9.6rem1rem=fontsize,此時9.6x50=480px剛好是原來的一半。

第二步:把頁面裡所有的px都除以100轉換成rem

如果沒解決其他幾種方式可以再嘗試下:

1.響應式布局 bootstrap

2.百分比布局

3.**查詢 @media,使用 viewport,畫素轉換

對於iPhone5解析度相容性調整問題

iphone5的新解析度著實啃爹了一把,剛下完xcode4.5想玩玩iphone5的長螢幕效果,順便研究下怎麼去相容它。繼續,開始修復黑邊 這一步只要在config裡多加一張4inch的launch就能搞定 這樣如下圖,讓layout上對齊,並且actionsheet顯示正常 最後用巨集替換掉寫死的...

iOS 對於iPhone5解析度相容性調整問題

iphone5的新解析度著實啃爹了一把,剛下完xcode4.5想玩玩iphone5的長螢幕效果,順便研究下怎麼去相容它。繼續,開始修復黑邊 這一步只要在config裡多加一張4inch的launch就能搞定 這樣如下圖,讓layout上對齊,並且actionsheet顯示正常 最後用巨集替換掉寫死的...

HTML相容性處理

注意 html 對ie7的hack 必須保證html頂部有如下宣告 二 萬能 float 閉合 關於 clear float 的原理可參見 how to clear floats without structural markup 將以下 加入global css 中,給需要閉合的div加上 cla...