iOS與Android中webview的css適配

2021-06-26 08:30:41 字數 1566 閱讀 5749

1. js執行效率及記憶體洩漏問題(問題比較大,需要逐步探索優化)

2. css適配問題

這裡主要記錄下自己實踐過的css適配問題,以備以後調研及開發使用

css適配

1. 螢幕畫素值適配(不常用,需要配合密度來適配)

這種情況可在請求頁面時代入引數,解析度及密度值,由伺服器端決定吐不同css,可以解決全部適配問題

最近在android適配中發現新問題,

三星 n7000(2.3.6和4.0系統顯示也不一致;4.0會把小css顯示大,2.3.6會顯示比4.0小),2.3.6是刷入的系統

2. 實際頁面畫素值適配(常用)

第二種在應用時也有不同方式

a. 根據document.width,載入不同css

b. meta,根據不同device-width與device-height載入不同css

方式a,比較好用,可以解決全部適配問題,但是需要加入指令碼,實時判斷;css載入慢時會導致螢幕閃動效果明顯

方式b,android會出現第一次頁面載入時css載入不對的情況,至今沒找到解決辦法,各位誰有解決方法可以指教

css檔案:

css檔案可區別編寫

ios:2套;一套小解析度的,主要適用iphone3gs之前的和ipod touch;大解析度主要應用在iphone4之後的及ipad上。大小2套之間總體差距為1倍,但細節會有調整。

重要問題:ios webview有乙個屬性會導致橫豎屏旋轉時縮放頁面,此屬性需要關閉(具體怎麼做去問ios開發人員);如果此屬性不關閉,需要css中適配(橫屏orientation:landscape ,豎屏orientation:portrait),工作量會成倍增長。

android:3套;分別適配螢幕寬和高<500,寬和高都》720及其他

另,最好能夠保持sdk的方向,如果可以橫豎轉換,頁面中不要有拖拽相關的元件。

附解析度及代表機型:

320*480

代表機型

iphone1,touch

360*640

代表機型

諾基亞5230

480*640

代表機型

多普達鑽石

480*800

代表機型 三星i9000

640*960

代表機型

iphone4

540*960

代表機型

htc g14

768*1024

代表機型 ipad2

720*1280

代表機型

三星i9250

800*1280

但是js獲取的寬高是400×640

代表機型 三星 n7000

1536*2048

但是js獲取的寬高是768×1024

代表機型

ipad3

1136×640

但是js獲取的寬高是320×568

iphone5,touch5

IOS與Android的相容

關於移動端的那些相容 一.ios與android的相容 1.關於touchstar,touchmove,touchend使用 問題 在ios上,使用以上方法,會呼叫起ios系統自帶的一些預設任務,會使頁面整體滾動甚至退出程式 解決方案 使用 touchstar.prevent禁用蘋果的預設方法,為什...

iOS與Android開發之比較

之前的經驗 雖然在軟體開發方面已經有超過12年的經驗,不過henneke說他對ios與android卻沒什麼經驗,從他的角度來看,這兩個平台對他來說處於同乙個水平之上 在開始開發這個應用時,我完全是個android新手,甚至在這個專案之前我都沒有在電腦上安裝過sdk。同樣,我在ios上也是個十足的新...

Android與IOS的後台與推送對比

android與ios的後台與推送對比 ios的後台型別 1.儲存現場 按下home鍵之後10秒殺死程序,並釋放記憶體,儲存殺死程序時的資料和狀態,下次開啟時恢復 2.ios支援多工,按下home轉為多狀態,儲存在系統記憶體中,但是只能進行系統允許的動作。3.真正桌面級多工,在後台沒有任何限制動作 ...