（一）移動端前端開發-移動端基礎

文章目錄

• 一、移動web
• 二、H5運作環境分類
• 三、移動端螢幕
• • 1. PPI
  • 2. 像素分類
  • 3. 螢幕縮放
  • 4. DPR
• 四、移動端浏覽器及核心分析
• • 1. 移動端浏覽器類型
  • 2. 核心
• 五、移動端開發測試浏覽器
• • 1. 使用Chrome浏覽器作為移動開發測試浏覽器
  • 2. 常用面闆
  • 3. Network conditions
  • 4. Sensors
• 六、視口
• • 1. 介紹
  • 2. 布局視口
  • 3. 視覺視口
  • 4. 理想視口
• 七、移動網頁開發和PC網頁開發有什麼異同？
• 八、em——使用相對長度機關em布局網頁内容
• 九、rem——使用相對長度機關rem布局網頁内容

一、移動web

• 運作在移動裝置上的産品。
• 适配平台：
  • 安卓
  • IOS

二、H5運作環境分類

• 移動端浏覽器
• 原生APP的webview中（hyBrid模式）
  • 開發的H5頁面鑲嵌入到app的webview中顯示。

三、移動端螢幕

1. PPI

  代表螢幕每英寸的像素數量，即像素密度。

  高PPI螢幕顯示的元素會比較精細（看起來會比較小），低PPI螢幕顯示的元素相對來說就比較粗糙（看起來會比較大）。

2. 像素分類

  裝置像素（device independent pixels）：裝置螢幕的實體像素，任何裝置的實體像素的數量都是固定的。

  CSS像素（CSS pixels）：又稱邏輯像素，是為web開發者創造的，在CSS和Javascript中使用的一個抽象的層。

3. 螢幕縮放

• PC端:CSS的一個像素往往都是對應電腦螢幕的一個裝置像素。
• 移動端:
  • 由于螢幕尺寸的限制，縮放是經常性的操作。
  • 縮小操作時，一個裝置像素覆寫了多個CSS像素。
  • 放大操作時，一個CSS像素覆寫了多個裝置像素。

4. DPR

  裝置像素比DPR（devicePixelRatio）是預設縮放為100%的情況下，裝置像素和CSS像素的比值。

  DPR = 裝置像素 / CSS像素（某一方向上）

  Retina螢幕 : 同樣大小的螢幕上，像素多了一倍，即DPR = 2 。

四、移動端浏覽器及核心分析

1. 移動端浏覽器類型

  内置浏覽器、可下載下傳浏覽器、代理浏覽器、webview

2. 核心

• Gecko核心，css字首為“-moz-”，代表firefox。
• WebKit核心，css字首為“-webkit-”，代表chrome、蘋果、微信。
• Presto核心，css字首為“-o-”，代表Opera（歐朋）。
• Trident核心，css字首為“-ms-”，代表IE。

五、移動端開發測試浏覽器

1. 使用Chrome浏覽器作為移動開發測試浏覽器

  其中很多手機浏覽器都會用Webkit作為渲染引擎。

2. 常用面闆

• Device：可以選擇要測試的裝置以及型号。
• Resolution：裝置像素。
• 螢幕顯示比例：可以自行選擇。
• Device pixel ratio：裝置像素比。
• 模拟網速情況。
• 手持裝置的橫屏豎屏。
• 可以點開這裡進行檢視隐藏的選項。

  

3. Network conditions

• Disk cache：磁盤緩存，預設是不緩存的。
• network throttling：網絡節流，點選後面的下拉菜單，可以選擇不同的網絡供開發者測試模拟。
• user agent spoofing：使用者代理商，可以選擇是預設代理商，或是自定義代理商。

  

4. Sensors

• geolocation：是否需要模拟地理定位。下拉菜單中進行選擇。一般這個功能會出現在需要地理定位或是引用地圖的時候。
  • lat（經度）
  • Lon（次元）
• Orientation：模拟陀螺儀，可以手動的改變3個軸上的值。這個功能一般是用于搖一搖等有重力感應的場景。

  

六、視口

1. 介紹

  即可視區域。

2. 布局視口

  在移動端上，視口與移動浏覽器螢幕寬度不在相關聯，而是完全獨立的，我們稱它為布局視口。

  手機上，為容納桌面浏覽器設計的網站，預設的布局視口寬度遠大于手機螢幕的寬度。

3. 視覺視口

  視覺視口是使用者正在看到網站區域。使用者可以通過縮放來操作視覺視口，同時不會影響布局視口，布局視口仍然保持原來的寬度。

4. 理想視口

  布局視口的預設寬度并不是一個理想的寬度。

  真正适合手機的視口是理想視口。

七、移動網頁開發和PC網頁開發有什麼異同？

八、em——使用相對長度機關em布局網頁内容

• em是描述相對于目前對象内文本的字型尺寸，它是相對長度機關。
• 一般浏覽器字型大小預設16px。即1em。
• 特性：
  • em的值并不是固定的。
  • em會繼承父級元素的字型大小（相對父級的字型大小而發生變化）。

九、rem——使用相對長度機關rem布局網頁内容

• 隻修改根元素字型大小就成比例的調整所有字型的大小，又可以避免字型大小逐層複合的連鎖反應。
• rem與em的差別在于使用rem為元素設定字型大小時，仍然時相對大小，但相對的隻是HTML根元素。
• 特性：
  • rem的值并不是固定的。
  • rem是相對根節點html發生變化（與父節點無關）。
  • 實際開發中一般預設的吧html根節點設定為10px（62.5%）或者是100排序，友善後續計算。