移動Web開發基礎

目錄

• 浏覽器
• 視口
• • meta視口标簽
• Normalize.css初始化預設樣式
• 實體像素和實體像素比
• 二倍圖
• • 背景圖檔的縮放background-size
• SVG矢量圖
• 移動端開發選擇
• • 單獨移動端頁面
  • 響應式頁面
• CSS3盒子模型box-sizing
• 特殊樣式

浏覽器

浏覽器按照裝置類型來劃分，主要包括PC端浏覽器和移動端浏覽器。

PC端的浏覽器主要包括Google（谷歌）公司的Chrome浏覽器、Mozilla公司的Firefox浏覽器和Edge浏覽器等。

移動端裝置主要包括Android、iOS等手機裝置，螢幕尺寸非常多，手機分辨率和大小也不盡相同，碎片化嚴重。

國内的UC、QQ、百度等手機浏覽器都是根據Webkit修改過來的核心，相容移動端主流浏覽器，處理Webkit核心浏覽器即可

視口

視口：是浏覽器顯示頁面内容的螢幕區域

視口主要包括布局視口、視覺視口和理想視口，視口能将大分辨率尺寸網頁縮小顯示在手機浏覽器上，保證網頁在手機上看起來更像在桌面浏覽器中的樣子。

布局視口：是指網頁的寬度，一般移動端浏覽器都預設設定了布局視口的寬度。

視覺視口：是指使用者正在看到的網站的區域，這個區域的寬度等同于移動裝置的浏覽器視窗的寬度。

理想視口：是指對裝置來講最理想的視口尺寸。

meta視口标簽

在<meta>标簽中，将name屬性設為viewport，即可設定視口。

在實際開發中，通常會将視口設定為不允許使用者縮放頁面、視口寬度等于裝置寬度、初始縮放比為1.0，最大縮放比為1.0。

<!-- 設定content 通知浏覽器布局視口的寬度應該和裝置的寬度一緻 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
           

<meta>标簽的常用屬性：

Normalize.css初始化預設樣式

移動端的樣式初始化。

在傳統的PC端Web開發中，一些舊版本的浏覽器不符合W3C标準，有些不支援HTML5和CSS3的新特性。

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

優點：

• 保護了有價值的預設值
• 恢複了浏覽器的bug
• 是子產品化的
• 擁有詳細的文檔

實體像素和實體像素比

實體像素點：是指螢幕顯示的最小顆粒，是實體真實存在的，這是廠商出廠時就設定好了的。

PC端和早前的手機螢幕：1CSS像素 = 1實體像素。

我們開發時的1px不是一定等于1個實體像素的。

一個px能顯示的實體像素點的個數，稱為實體像素比或螢幕像素比。

在高分辨率螢幕中，CSS使用的像素機關和螢幕顯示的像素并不是一對一的，将螢幕像素除以CSS像素得到的就是裝置像素比。為了解決這個問題，高分辨率裝置的作業系統會讓網頁畫面進行縮放，讓大小看上去比較舒适，而網頁中使用的像素也不必修改，尤其是網頁中的文字，在高分辨率螢幕下的顯示效果會更加細膩

Retina（視網膜螢幕）是一種顯示技術，可以把更多的實體像素點壓縮至一塊螢幕裡，進而達到更高的分辨率并提高螢幕顯示的細膩程度

二倍圖

由于存在實體像素比，我們将css像素圖檔再移動端打開時會被放大，圖檔會變模糊。是以我們提前準備一張大兩倍的圖檔，将他手動縮小放進去，即使被放大也依然是清晰的。我們準備的圖檔比我們實際需要的大小大二倍，這個方式就是二倍圖。

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

通常使用二倍圖，但是現在也存在3倍圖4倍圖的情況，這個看實際開發公司需求。

背景圖檔的縮放background-size

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

/*隻寫一個參數 肯定是寬度 高度不設定 等比例縮放*/
/*也可以寫百分比*/
background-size:寬度 高度;
background-size:cover;  /*等比例拉伸 直到完全覆寫 圖檔可能顯示不全*/
background-size:contain; /*當寬度或高度鋪滿時就不再拉伸了*/
           

SVG矢量圖

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

可縮放矢量圖形（SVG）是一種開放标準的描述矢量圖形的語言，它基于XML（可擴充标記語言）。

移動端開發選擇

• 單獨制作移動端頁面
• 響應式頁面相容移動端

單獨移動端頁面

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

響應式頁面

響應式頁面指的是同一頁面在不同螢幕尺寸下實作不同的布局，進而使一個頁面相容不同的終端。

通過判斷螢幕寬度來改變樣式，以适應不同終端。

響應式開發主要是為了解決移動網際網路浏覽的問題。

響應式頁面的優點：

• 可以跨平台
• 便于搜尋引擎收錄
• 節約成本

CSS3盒子模型box-sizing

傳統盒子模型： 盒子寬度 = CSS中設定的width+border+padding。

CSS3盒子模型： 盒子寬度 = CSS中設定的寬度width包含了border和padding，也就是說padding和border不會撐大盒子了。

移動端可以全部使用CSS3盒子模型；PC端如果完全需要相容，就用傳統模式，不考慮相容性，就選擇CSS3盒子模型。

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

特殊樣式

/*點選高亮清除 設定為透明*/
-webkit-tap-highlight-color:transparent;

/*在移動端浏覽器預設的外觀在ios上加上這個屬性才能給按鈕和輸入框自定義樣式*/
-webkit-appearance:none;

/*禁用長按頁面時彈出菜單*/
-webkit-touch-callout:none;