移動端基礎

2022-08-02 16:33:19 字數 893 閱讀 1233

移動端瀏覽器我們主要針對webkit核心進行相容

現在移動端碎片化比較嚴重,解析度和螢幕尺寸大小不一

1、移動端除錯方法

視口(viewport)就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口、視覺視口和理想視口

2.1布局視口 layout viewport

標準寫法:

屬性解釋說明

width

寬度設定的是viewport寬度,可以設定device-width(寬度是裝置寬度)特殊值

initial-scale

初始縮放比,大於0的數字(倍數,一般為1.0)

maximum-scale

最大縮放比,大於0的數字(倍數,一般為1.0)

minimum-scale

最小縮放比,大於0的數字(倍數,一般為1.0)

user-scalable

使用者是否可以縮放,yes或no(1或0)(一般設定為no)

常見移動端螢幕尺寸:

開發中需要用多倍圖,比如需要放乙個50*50px的,直接放到iphone8裡,會放大二倍,不清晰,這時採取用一張100*100px的,手動縮小為50*50px

準備的比實際需要的大二倍,就是二倍圖,當然也有3倍4倍圖

通常情況下,**網域名稱前面加m(mobile)可以開啟移動端。通過裝置判斷,如果是移動端開啟,則自動跳轉到移動端頁面。

通過判斷螢幕寬度來改變樣式,以適應不同終端

缺點:製作麻煩,需花費很大精力去調相容性問題

移動端瀏覽器基本以webkit核心為主,所以就考慮webkit相容性問題。

移動端css初始化推薦使用normalize.css

移動端基礎

1.視口 視口就是瀏覽器顯示頁面內容的螢幕區域 視口分為布局視口 視覺視口 理想視口 移動端布局想要的是理想視口就是手機螢幕有多寬,我們的布局視口就 有多寬 通過給移動端頁面增加meta視口標籤 2.meta視口標籤 viewport 視口標籤 content width device width ...

移動端基礎

移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重,解析度和螢幕尺寸大小不一 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 屬性解釋說明 width 寬度設定的是viewport寬度,可以設定device width 寬度是...

移動端測試基礎

二 monkey 1.連線夜神模擬器 adb connect 127.0.0.1 62001 2.連線安卓實機 開啟手機的開發這模式,用資料線 能夠資料傳輸 連線 3.adb devices 檢視已連線的裝置 4.adb get state 檢視已連線裝置的狀態 ps adb連不上可能是因為 1.資...