移動端前端開發技術概況

死磕的斯坦張發表於2020-11-07

移動web開發流式佈局

1.0 移動端基礎

1.1瀏覽器現狀

國內的UC和QQ,百度等手機瀏覽器都是根據Webkit修改過來的核心,國內尚無自主研發的核心,就像國內的手機作業系統都是基於Android修改開發的一樣。

總結:相容移動端主流瀏覽器,處理Webkit核心瀏覽器即可。

1.2移動端除錯方法

  • Chrome DevTools(谷歌瀏覽器)的模擬手機除錯
  • 搭建本地web伺服器,手機和伺服器一個區域網內,通過手機訪問伺服器
  • 使用外網伺服器,直接IP或域名訪問

2.0 視口

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

2.1 佈局視口 layout viewport

一般移動裝置的瀏覽器都預設設定了一個佈局視口,用於解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口解析度設定為 980px,所以PC上的網頁大多都能在手機上呈現,只不過元素看上去很小,一般預設可以通過手動縮放網頁。

2.2視覺視口 visual viewport

字面意思,它是使用者正在看到的網站的區域。注意:是網站的區域。

我們可以通過縮放去操作視覺視口,但不會影響佈局視口,佈局視口仍保持原來的寬度。

2.3理想視口 ideal viewport

為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定

理想視口,對裝置來講,是最理想的視口尺寸

需要手動添寫meta視口標籤通知瀏覽器操作

meta視口標籤的主要目的:佈局視口的寬度應該與理想視口的寬度一致,簡單理解就是裝置有多寬,我們佈局的視口就多寬

總結:我們開發最終會用理想視口,而理想視口就是將佈局視口的寬度修改為視覺視口

2.4meta標籤

在這裡插入圖片描述

最標準的viewport設定

  • 視口寬度和裝置保持一致
  • 視口的預設縮放比例1.0
  • 不允許使用者自行縮放
  • 最大允許的縮放比例1.0
  • 最小允許的縮放比例1.0

3.0二倍圖

3.1物理畫素&物理畫素比

物理畫素點指的是螢幕顯示的最小顆粒,是物理真實存在的。這是廠商在出廠時就設定好了,比如蘋果6 是 750* 1334

我們開發時候的1px 不是一定等於1個物理畫素的

一個px的能顯示的物理畫素點的個數,稱為物理畫素比或螢幕畫素比

如果把1張100*100的圖片放到手機裡面會按照物理畫素比給我們縮放

lRetina(視網膜螢幕)是一種顯示技術,可以將把更多的物理畫素點壓縮至一塊螢幕裡,從而達到更高的解析度,並提高螢幕顯示的細膩程度。

對於一張 50px * 50px 的圖片,在手機或 Retina 屏中開啟,按照剛才的物理畫素比會放大倍數,這樣會造成圖片模糊

在標準的viewport設定中,使用倍圖來提高圖片質量,解決在高清裝置中的模糊問題

通常使用二倍圖, 因為iPhone 6 的影響背景圖片 注意縮放問題

3.2背景縮放background-size

background-size 屬性規定背景影像的尺寸

background-size: 背景圖片寬度 背景圖片高度;

單位: 長度|百分比|cover|contain;

cover把背景影像擴充套件至足夠大,以使背景影像完全覆蓋背景區域。

contain把影像影像擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域

4.0 移動開發選擇和技術解決方案

4.1移動端主流方案

1.單獨製作移動端頁面(主流)

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

也就是說,PC端和移動端為兩套網站,pc端是pc斷的樣式,移動端在寫一套,專門針對移動端適配的一套網站

京東pc端:

在這裡插入圖片描述

京東移動端:

在這裡插入圖片描述

2.響應式頁面相容移動端(其次)

響應式網站:即pc和移動端共用一套網站,只不過在不同螢幕下,樣式會自動適配

4.2 移動端技術解決方案

1.移動端瀏覽器相容問題

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

我們可以放心使用 H5 標籤和 CSS3 樣式。

同時我們瀏覽器的私有字首我們只需要考慮新增 webkit 即可

2.移動端公共樣式

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

Normalize.css:保護了有價值的預設值

Normalize.css:修復了瀏覽器的bug

Normalize.css:是模組化的

Normalize.css:擁有詳細的文件

官網地址: http://necolas.github.io/normalize.css/

4.3 移動端大量使用 CSS3盒子模型box-sizing

傳統模式寬度計算:盒子的寬度 = CSS中設定的width + border + padding

CSS3盒子模型: 盒子的寬度= CSS中設定的寬度width 裡面包含了 border 和 padding

也就是說,我們的CSS3中的盒子模型, padding 和 border 不會撐大盒子了

/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統盒子模型*/
box-sizing: content-box;

移動端可以全部CSS3 盒子模型

PC端如果完全需要相容,我們就用傳統模式,如果不考慮相容性,我們就選擇 CSS3 盒子模型

4.4移動端特殊樣式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*點選高亮我們需要清除清除  設定為transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移動端瀏覽器預設的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance: none;
/*禁用長按頁面時的彈出選單*/
img,a { -webkit-touch-callout: none; }

5.0移動端常見佈局

移動端單獨製作

  • 流式佈局(百分比佈局)
  • flex 彈性佈局(強烈推薦)
  • less+rem+媒體查詢佈局
  • 混合佈局

響應式

  • 媒體查詢
  • bootstarp

流式佈局:

流式佈局,就是百分比佈局,也稱非固定畫素佈局。

通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮,不受固定畫素的限制,內容向兩側填充。

流式佈局方式是移動web開發使用的比較常見的佈局方式。

相關文章