文章目錄

移動端Web開發
移動端基礎
- 瀏覽器
- 視口
- 樣式撰寫
- 解析度和設備像素比
- 二倍圖
- SVG矢量圖

移動端Web開發

移動Web開發的兩種主流方案，一種是單獨制作移動端頁面，另一種是制作回應式頁面

移動端頁面：

單獨制作移動端頁面的優勢和劣勢：
在這里插入圖片描述
單獨制作移動端頁面，通常的做法是不改變原有的PC端頁面，然后針對移動端單獨開發出一套特定的版本，

如果是移動設備（iPhone 6/7/8 Plus），則跳轉到移動端頁面
如果是PC端設備，則跳轉到PC端頁面

回應式頁面：

回應式頁面指的是同一頁面在不同螢屏尺寸下實作不同的布局，從而使一個頁面兼容不同的終端，

回應式開發主要是為了解決移動互聯網瀏覽的問題

回應式頁面的優點：

可以跨平臺，回應式開發具有跨平臺的優勢，能夠快捷地解決多終端設備的顯示適配問題，
便于搜索引擎收錄，無論在移動端設備還是PC端上訪問的都是同一個鏈接地址，這樣就減少了權重的分散，讓網站對搜索引擎更加友好，
節約成本，回應式網站可以兼容多個終端，開發者不需要為各個終端撰寫不同的代碼，對于開發者而言，減少了大量重復的作業，提高了作業的效率；對于公司而言，節省了人員開支，降低了開發成本

1、移動端開發選擇：

單獨移動端頁面（主流）：

通常情況下，網址域名前面加 m(mobile) 可以打開移動端，通過判斷設備，如果是移動設備打開，則跳到移動端頁面，

回應式兼容PC移動端（其次）：

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

2、移動端技術選型：

單獨制作移動端頁面：

流式布局（百分比布局）
flex 彈性布局（強烈推薦）
less+rem+媒體查詢布局
混合布局

回應式頁面兼容移動端：

媒體查詢
Bootstrap

移動端基礎

瀏覽器

瀏覽器按照設備型別來劃分，主要包括PC端瀏覽器和移動端瀏覽器

瀏覽器內核主要包括Blink、WebKit和Trident等，

PC端常見瀏覽器：

PC端的瀏覽器主要包括Google（谷歌）公司的Chrome瀏覽器（推薦）、Mozilla公司的Firefox瀏覽器、和Edge瀏覽器等，

Chrome瀏覽器的優勢：

市場占有率高，兼容性好，界面簡潔、簡單易用，基于強大的JavaScript V8引擎，速度很快，
可通過擴展插件增強功能，便于開發人員使用，內置防止網路釣魚及惡意軟體功能，更加安全，
跨平臺，支持PC端的Windows、Linux和Mac系統，以及移動端的Android和iOS系統，

移動端常見瀏覽器：

移動端設備主要包括Android、iOS等手機設備，

手機螢屏現狀：

移動端設備螢屏尺寸非常多，碎片化嚴重，
Android設備有多種解析度：480x800, 480x854, 540x960,720x1280，1080x1920等，還有傳說中的2K，4k屏，
近年來iPhone的碎片化也加劇了，其設備的主要解析度有：640x960, 640x1136, 750x1334, 1242x2208等，
作為開發者無需關注這些解析度，因為我們常用的尺寸單位是 px ，
螢屏尺寸非常多，手機解析度和大小也不盡相同，碎片化嚴重，

移動端的瀏覽器主要包括Android Browser和Mobile Safari，以及國產瀏覽器，

瀏覽器的內核主要是Webkit內核，對HTML5提供了很好的支持，

國產瀏覽器主要包括UC瀏覽器、QQ瀏覽器和百度瀏覽器等，都是根據Webkit修改過來的內核，國內尚無自主研發的內核，就像國內的手機作業系統都是基于Android修改開發的一樣，
在這里插入圖片描述

總結：兼容移動端主流瀏覽器，處理Webkit內核瀏覽器即可，

移動Web開發需要注意：

1、移動端設備受螢屏尺寸限制：操作的局限性比較大，所以要注意頁面的結構不能過于復雜，要提煉出該網站最核心的功能，并簡潔清晰地呈現出來，
2、移動端的操作方式的改變：移動端頁面的所有互動活動由滑鼠控制變為手指觸屏控制，操作方式更加豐富，如搖一搖、雙指放大、滑動、雙擊、單擊等，

移動端除錯方法：

Chrome DevTools（谷歌瀏覽器）的模擬手機除錯
搭建本地web服務器，手機和服務器一個局域網內，通過手機訪問服務器
使用外網服務器，直接IP或域名訪問

視口

視口（viewport）就是瀏覽器顯示頁面內容的螢屏區域，視口可以分為布局視口、視覺視口和理想視口

1、布局視口（layout viewport）

一般移動設備的瀏覽器都默認設定了一個布局視口，用于解決早期的PC端頁面在手機上顯示的問題，
iOS, Android基本都將這個視口解析度設定為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般默認可以通過手動縮放網頁，

2、視覺視口 （visual viewport）

它是用戶正在看到的網站的區域，注意：是網站的區域，
可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度

3、理想視口（ideal viewport）

為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定
理想視口，對設備來講，是最理想的視口尺寸
需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，布局的視口就多寬

meta視口標簽：

在傳統的PC端網頁開發中，并沒有使用過meta標簽來設定視口，此時瀏覽器會按照默認的布局視口寬度來顯示網頁，如果希望網頁在瀏覽器中以理想視口的形式呈現，就需要利用標簽設定視口，
在標簽中，將name屬性設為viewport，即可設定視口，

在這里插入圖片描述
在實際開發中，通常會將視口設定為不允許用戶縮放頁面、視口寬度等于設備寬度、初始縮放比為1.0，最大縮放比為1.0，示例代碼如下，

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

樣式撰寫

利用Normalize.css初始化默認樣式：

在傳統的PC端Web開發中，一些舊版本的瀏覽器不符合W3C標準，有些不支持HTML5和CSS3的新特性，給開發人員帶來了許多麻煩，

在移動Web開發中，幾乎不用擔心瀏覽器的兼容問題，因為移動端的瀏覽器基本上都是以WebKit內核為主，對HTML5和CSS3的支持非常好，

Normalize.css的特點：

在這里插入圖片描述

下載Normalize.css
引入Normalize.css檔案

<head>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" href="normalize.css">
</head>

設定移動端的特殊樣式：

在實際開發中，移動Web頁面的設計風格更接近App（手機應用），而不是傳統的網頁，為了有更好的用戶體驗，我們可以給移動Web頁面設定一些特殊樣式，

移動端的特殊樣式是非標準的，因此加上了私有前綴“-webkit-”，該前綴在WebKit和Blink內核的瀏覽器中有效，適用于Chrome瀏覽器和大多數移動端瀏覽器，

在移動Web開發中經常會設定的特殊樣式，如表所示：
在這里插入圖片描述

解析度和設備像素比

1、解析度

在移動端Web開發的程序中，除了要使用<meta>標簽設定理想視口之外，還需要解決移動端頁面中圖片的顯示問題，圖片的顯示是否清晰，與螢屏解析度、影像解析度和設備像素比有關，

解析度分為螢屏解析度和影像解析度

螢屏解析度是指一個螢屏上可以顯示多少資訊，通常以像素（px）為單位來衡量，在同一臺設備上，圖片的像素點和螢屏的像素點通常是一一對應的

螢屏解析度1920×1080表示水平方向含有1920個像素，垂直方向含有1080個像素，螢屏上總共有2 073 600個像素點

在螢屏的大小相同的情況下，如果螢屏的解析度低（如640×480），則螢屏上顯示的像素少，單個像素點比較大，看起來會有種顆粒感
在螢屏的大小相同的情況下，如果螢屏的解析度高（如1920×1080），則螢屏上顯示的像素多，單個像素點比較小，看起來會比較清晰

影像解析度500×200表示這張圖片在螢屏上按1:1顯示時，水平方向有500個像素點（色塊），垂直方向有200個像素點（色塊）

圖片的解析度越低，圖片越模糊，圖片的解析度越高，圖片越清晰
當圖片放大時，圖片在螢屏上顯示的像素變大，軟體通過演算法對影像進行了像素補充
當圖片縮小時，也是通過演算法將顯示的圖片像素進行減少

2、設備像素比

在傳統的PC端和早期的普通手機中，螢屏上的一個像素和網頁CSS中的一個像素是完全對應的，隨著技術的進步，為了提高螢屏顯示的細膩度，高解析度的螢屏開始流行，一塊螢屏可以顯示更多的像素，隨之產生了一個問題，就是同一個網頁在不同解析度的螢屏下顯示效果會有大小差異，因為CSS中使用的像素是一個固定值，它不會因為螢屏解析度而發生改變，

在螢屏尺寸相同的情況下，一個12px的文字在低解析度的螢屏中的尺寸很大，但在高解析度的螢屏中尺寸很小，

在解析度非常高的螢屏中，文字會顯得特別小，不利于瀏覽，

在高解析度螢屏中，CSS使用的像素單位和螢屏顯示的像素并不是一對一的，將螢屏像素除以CSS像素得到的就是設備像素比，

為了解決這個問題，高解析度設備的作業系統會對網頁畫面進行縮放，讓大小看上去比較舒適，而網頁中使用的像素也不必修改，尤其是網頁中的文字，在高解析度螢屏下的顯示效果會更加細膩，例如，當設備像素比為4時，CSS像素和螢屏像素的轉換關系

二倍圖

二倍圖可以理解為當設備像素比很大時，圖片會被放大，而放大會讓圖片看起來模糊，為此，我們可以使用二倍圖的方式來提高圖片的清晰度，

當一個50px×50px（CSS像素）的圖片直接放到iPhone 6/7/8設備中顯示時，圖片會被放大，長和寬都放大到原來的二倍（iPhone 6/7/8的設備像素比為2），即100px×100px，

<body>
  <!-- 原圖 -->
  <img src="images/50.png" alt="">
  <!-- 二倍圖 -->
  <img src="images/100.png" alt="">
</body>
<style>
  img:nth-child(2) {
    width: 50px; 
    height: 50px; 
  }
</style>

物理像素&物理像素比:

物理像素點指的是螢屏顯示的最小顆粒，是物理真實存在的，這是廠商在出廠時就設定好了,比如蘋果6\7\8 是 750* 1334
我們開發時候的1px 不是一定等于1個物理像素的
PC端頁面，1個px 等于1個物理像素的，但是移動端就不盡相同
一個px的能顯示的物理像素點的個數，稱為物理像素比或螢屏像素比

背景圖片的縮放：

除了使用<img>標簽插入的圖片，還會用到背景圖片，所以背景圖片也需要設定縮放效果，

在CSS3中，提供了background-size屬性用來規定背景圖片的尺寸，從而達到背景圖片的縮放效果，

background-size設定的寬度和高度可以是像素或百分比，使用background-size的基本語法如下：

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

除像素或百分比以外，background-size屬性還可以用其他的屬性值來實作不同的縮放效果，如表所示：
在這里插入圖片描述

SVG矢量圖

網頁中的圖片可以分為兩類，一類是小圖示和簡單的圖形；另一類圖片經常使用GIF、JPEG、PNG等格式，這些格式比較常見，但因為都是基于像素處理的，當放大時會失真，變得模糊，

可縮放矢量圖形（Scalable Vector Graphics，SVG）是一種開放標準的描述矢量圖形的語言，它基于XML（可擴展標記語言），在2003年1月，SVG 1.1被確立為W3C（萬維網聯盟）標準，

在這里插入圖片描述
SVG使用標簽的方式定義各種圖形，外層標簽是<svg>，viewBox可以定義用來觀察SVG視圖的一個矩形區域，它的屬性主要包括x、y、width、height，用數字表示，每個數字之間用空格或逗號隔開，表示定義一個在左上角(x, y)坐標位置，寬度為width，高度為height的矩形，常用屬性如表所示：

在這里插入圖片描述
在<svg>標簽的內部，可以使用SVG提供的一些預定義的標簽來繪制圖形，或者繪制文字,
常用的內部標簽如表所示：

SVG常用的內部標簽還可以通過屬性來設定樣式，常用的屬性如表所示：

在這里插入圖片描述

<body>
  <svg width="100%" height="100%">
    <circle cx="100" cy="50" r="40" 
     stroke="black" stroke-width="2" fill="#ddd">
  </svg>
</body>

從外部引入SVG檔案：

<body>
  <img src="circle.svg" alt="">
</body>

定義circle.svg檔案，并進行XML宣告，其中standalone屬性用來規定此SVG檔案是“獨立的”還是含有對外部檔案的參考，此處設為no表示該SVG檔案會參考一個外部檔案（即第2行的DTD檔案），參考了外部的SVG的DTD檔案，此處參考的是W3C提供的svg11.dtd，表示含有所有允許的SVG元素，

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

在circle.svg檔案中添加代碼，為<svg>標簽添加了version（SVG版本）和xmlns（XML命名空間）屬性，用來在XML檔案中使用，并定義<circle>圓形，

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#ddd" />
</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/303634.html

標籤：其他

上一篇：?? 詳解KMP演算法

下一篇：??十分鐘快速學會使用Nodejs全堆疊開發微信公眾號【建議收藏】

移動端Web開發 基礎知識