iPhone多尺寸螢幕適配 等比例數值計算

2021-06-29 10:21:02 字數 1769 閱讀 5373

作為乙個ios開放者,在iphone6和iphone6 plus發布之後,慢慢的都會遇到螢幕適配的問題。

在討論適配之前,我們先來看看系統提供的放大模式。

放大模式下:螢幕尺寸仍然為320寬度,會根據裝置,介面等比放大至其他螢幕寬度的尺寸,由於是放大,會導致介面有輕微的模糊,並且狀態列也會和平時不一樣(明顯變大了)。

那麼適配模式下呢?不同尺寸裝置的螢幕點畫素是不一樣的,如果要處理乙個介面,並且要求iphone6plus和iphone5s是同一套設計稿,看起來一樣比例。那麼怎麼破?

無論是使用傳統布局,還是使用autolayout,都避不開的是介面的數值計算,比如同乙個左邊距,在iphone5下是10px,但是等比換算到iphone6plus的時候差不多就是13px了,莫非為了不同螢幕看起來比例一樣,我們還要分開處理,用條件來判斷並分別布局麼?

當我開始這麼想的時候,我是拒絕的,因為我們是愛加特效的開發者,怎麼能連等比例計算都不會玩呢?

好了拿到iphone5s螢幕尺寸640*1136的設計稿,什麼?左邊距是20px?

cgfloat leftpadding = 10*screen_width/320.0;
look! 我們已經有了乙個可以在各個尺寸螢幕下按同乙個設計稿等比例適應的左邊距了! 恩恩,還有很多值,乙個個來…

cgfloat rightpadding = 15*screen_width/320.0;

cgfloat toppadding = 20*screen_width/320.0;

.....

等等,這麼算,貌似有很多重複的東西出現了:screen_width/320.0,作為乙個有追求的開發者,怎麼能忍受那麼多重複的計算。必須加特效!

這裡我為了便捷,使用類似cgrect之類c函式實現,考慮效能沒有使用inline。建立乙個空的uiview的category

.h標頭檔案中:

extern cgfloat cgfloatin320(cgfloat value);
.m實現檔案中:

static cgfloat ratio = 0;//這是為了只算一次不要浪費太多計算比例的效能

cgfloat cgfloatin320(cgfloat value)

return value*ratio;

}

好了,現在再來計算我們的邊距:

cgfloat leftpadding = cgfloatin320(10);

cgfloat rightpadding = cgfloatin320(15);

cgfloat toppadding = cgfloatin320(20);

.....

這樣看起來真的是蠻不錯啊,相信許多開發小夥伴也在用類似這樣的方式做布局,總體上來說,這是要求不同尺寸相同比例布局的乙個可行的方案,但是還是要多說兩句:這種方式下的計算有時候會存在很小很小的偏差,雖然不多,但是有時候也會影響效果,所以,必要時的等分計算、自動布局的使用都是提高介面精確程度的方式。

2015.5.15更新

我在實際開發中使用了這種方式,後來發現了乙個額外的好處,就是可以通過控制比例尺來達到不同尺寸顯示內容不一樣多的處理,舉例子:

iphone5下一行顯示10個字,可能要求iphone6下顯示12個,iphone6plus下顯示15個,那麼其實我們可以通過設定這個scale的值來達到相應的目的。

當然,針對解析度等比例的值還是很有用處的。

iphone螢幕尺寸

裝置 iphone 寬 width 高 height 對角線 diagonal 邏輯解析度 point scale factor 裝置解析度 pixel ppi 3gs2.4 inches 62.1 mm 4.5 inches 115.5 mm 3.5 inch 320x480 1x320x480 ...

React Native螢幕尺寸適配

現在的手機品牌和型號越來越多,導致我們平時寫布局的時候會在個不同的移動裝置上顯示的效果不同,比如我們的設計稿乙個view的大小是300,如果直接寫300,可能在當前裝置顯示正常,但到了其他裝置可能就會偏小或者偏大,這就需要我們對螢幕進行適配。安卓原生的話有自己的適配規則,可以根據不同的尺寸建立不同的...

設定字根,配合rem適配(多尺寸螢幕的適配)

document.documentelement.style.fontsize這個就是字根,但相對的只是html根元素字型大小。rem單位就是相對html根元素字型大小 rem是css3新增的乙個相對單位 root em,根em 這個單位引起了廣泛關注。這個單位與em有什麼區別呢?區別在於使用rem...