Web移動端開發(fā)屏幕適配教程_第1頁
Web移動端開發(fā)屏幕適配教程_第2頁
Web移動端開發(fā)屏幕適配教程_第3頁
Web移動端開發(fā)屏幕適配教程_第4頁
Web移動端開發(fā)屏幕適配教程_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

一、基礎知識1、屏幕移動設備與PC設備最大的差異在于屏幕，這主要體現在屏幕尺寸和屏幕分辨率兩個方面。通常我們所指的屏幕尺寸，實際上指的是屏幕對角線的長度（一般用英寸來度量）。而分辨率則一般用像素來度量

px，表示屏幕水平和垂直方向的像素數，例如1920*1080指的是屏幕垂直方向和水平方向分別有1920和1080個像素點而構成。2、長度單位在Web開發(fā)中可以使用px（像素）、em、pt（點）、in（英寸）、cm（厘米）做為長度單位，我們最常用px（像素）做為長度單位。我們可以將上述的幾種長度單位劃分成相對長度單位和絕對長度單位。例如：iPhone3G/S和iPhone4/S的屏幕尺寸都為3.5英寸（in）但是屏幕分辨率卻分別為480x320px、960x480px，由此我們可以得出英寸是一個絕對長度單位，而像素是一個相對長度單位（像素并沒有固定的長度）。3、像素密度DPI（DotsPerInch）是印刷行業(yè)中用來表示打印機每英寸可以噴的墨汁點數，計算機顯示設備從打印機中借鑒了DPI的概念，由于計算機顯示設備中的最小單位不是墨汁點而是像素，所以用PPI（PixelsPerInch）值來表示屏幕每英寸的像素數量，我們將PPI、DPI都稱為像素密度，但PPI應用更廣泛，DPI在Android設備比較常見。利用屏幕分辨率計算PPI。4、設備獨立像素隨著技術發(fā)展，設備不斷更新，出現了不同PPI的屏幕共存的狀態(tài)（如iPhone3G/S為163PPI，iPhone4/S為326PPI），像素不再是統(tǒng)一的度量單位，這會造成同樣尺寸的圖像在不同PPI設備上的顯示大小不一樣。如下圖，假設你設計了一個163x163的藍色方塊，在PPI為163的屏幕上，那這個方塊看起來正好就是1x1寸大小，在PPI為326的屏幕上，這個方塊看起來就只有0.5x0.5寸大小了。但是做為用戶是不會關心這些細節(jié)的，他們只是希望在不同PPI的設備上看到的圖像內容差不多大小，所以這時我們需要一個新的單位，這個新的單位能夠保證圖像內容在不同的PPI設備看上去大小應該差不多，這就是獨立像素，在IOS設備上叫PT(Point)，Android設備上叫DIP(DeviceindependentPixel)或DP。舉例說明就是iPhone3G（PPI為163）1pt=1px，iPhone4（PPI為326）1pt=2px。通過上面例子我們不難發(fā)現pt同px是有一個對應（比例）關系的，這個對應（比例）關系是操作系統(tǒng)確定并處理，目的是確保不同PPI屏幕所能顯示的圖像大小是一致的，通過

window.devicePixelRatio

可以獲得該比例值。所以，我們如何處理在不同pt/px比例上使得顯示相同大小的圖片呢？很簡單，在美工設計圖片的時候，多設計幾種尺寸的圖片。5、像素5.1、物理像素物理像素指的是屏幕渲染圖像的最小單位，屬于屏幕的物理屬性，不可人為進行改變，其值大小決定了屏幕渲染圖像的品質，我們以上所討論的都指的是物理像素。獲取屏幕的物理像素尺寸：window.screen.width;window.screen.height;5.2、CSS像素CSS像素，與設備無關像素，指的是通過CSS進行網頁布局時用到的單位，其默認值(PC端)是和物理像素保持一致的（1個單位的CSS像素等于1個單位的物理像素），但是我們可通縮放來改變CSS像素的大小。我們需要理解的是物理像素和CSS像素的一個關系，1個物理像素并不總是等于一個CSS像素，通過縮放，一個CSS像素可能大于1個物理像素，也可能小于1個物理像素。二、調試1、模擬調試現代主流瀏覽器均支持移動開發(fā)模擬調試，通常按F12可以調起，其使用也比較簡單，可以幫我們方便快捷定位問題。2、真機調試模擬調試可以滿足大部分的開發(fā)調試任務，但是由于移動設備種類繁多，環(huán)境也十分復雜，模擬調試容易出現差錯，所以真機調試變的非常必要。有兩種方法可以實現真機調試：1、將做好的網頁上傳至服務器或者本地搭建服務器，然后移動設備通過網絡來訪問。（重點）2、借助第三方的調試工具，如weinre、debuggap、ghostlab(推薦)等。真機調試必須保證移動設備同服務器間的網絡是相通的。三、視口視口（viewport）是用來約束網站中最頂級塊元素<html>的，即它決定了<html>的大小。1、PC設備在PC設備上viewport的大小取決于瀏覽器窗口的大小，以CSS像素做為度量單位。通過以往CSS的知識，我們都能理解<html>的大小是會影響到我們的網頁布局的，而viewport又決定了<html>的大小，所以viewport間接的決定并影響了我們網頁的布局。/*獲取viewport的大小*/document.documentElement.clientWidth;document.documentElement.clientHeight;在PC端，我們通過調整瀏覽器窗口可以改變viewport的大小，為了保證網頁布局不發(fā)生錯亂，需要給元素設定較大固定寬度。2、移動設備移動設備屏幕普遍都是比較小的，但是大部分的網站又都是為PC設備來設計的，要想讓移動設備也可以正常顯示網頁，移動設備不得不做一些處理，通過上面的例子我們可以知道只要viewport足夠大，就能保證原本為PC設備設計的網頁也能在移動設備上正常顯示，移動設備廠商也的確是這樣來處理的。在移動設備上viewport不再受限于瀏覽器的窗口，而是允許開發(fā)人員自由設置viewport的大小，通常瀏覽器會設置一個默認大小的viewport，為了能夠正常顯示那些專為PC設計的網頁，一般這個值的大小會大于屏幕的尺寸。但是由于我們手機的屏幕很小，而viewport的值卻很大，所以頁面所有的內容就會縮小以適應屏幕，所以用手機看起來，這些字體和圖片就會特別小，這就像手機設置里面有個電腦版顯示一樣。要解釋上面的原因，需要進一步對移動設備的viewport進行分析，移動設備上有2個viewport（為了方便講解人為定義的），分別是

layoutviewport

和idealviewport。1、layoutviewport（布局視口）指的是我們可以進行網頁布局區(qū)域的大小，同樣是以CSS像素做為計量單位，可以通過下面方式獲取/*獲取layoutviewport*/document.documentElement.clientWidth;document.documentElement.clientHeight;通過前面介紹我們知道，如果要保證為PC設計的網頁在移動設備上布局不發(fā)生錯亂，移動設備會默認設置一個較大的viewport（如IOS為980px），這個viewport實際指的是layoutviewport。2、idealviewport（理想視口）設備屏幕區(qū)域，（以設備獨立像素PT、DP做為單位）以CSS像素做為計量單位，其大小是不可能被改變，通過下面方式可以獲取。/*獲取idealviewport有兩種情形*//*新設備*/window.screen.width;window.screen.height;/*老設備*/window.screen.width/window.devicePixelRatio;window.screen.height/window.devicePixelRatio;理解兩個viewport后我們來解釋為什么網頁會被縮放或出現水平滾動條：其原因在于移動設備瀏覽器會默認設置一個layoutviewport，并且這個值會大于idealviewport，那么我們也知道idealviewport就是屏幕區(qū)域，layoutviewport是我們布局網頁的區(qū)域，那么最終layoutviewport是要顯示在idealviewport里的，而layoutviewport大于idealviewport時，于是就出現滾動條了，那么為什么有的移動設備網頁內容被縮放了呢？移動設備廠商認為將網頁完整顯示給用戶才最合理，而不該出現滾動條，所以就將layoutviewport進行了縮放，使其恰好完整顯示在idealviewport（屏幕）里，其縮放比例為idealviewport/layoutviewport。3、移動瀏覽器移動端開發(fā)主要是針對IOS和Android兩個操作系統(tǒng)平臺的，除此之外還有WindowsPhone。移動端主要可以分成三大類，系統(tǒng)自帶瀏覽器、應用內置瀏覽器、第三方瀏覽器。3.1、系統(tǒng)瀏覽器指跟隨移動設備操作系統(tǒng)一起安裝的瀏覽器，一般不能卸載。比如iPhone的safari瀏覽器。3.2、應用內置瀏覽器通常在移動設備上都會安裝一些APP例如QQ、微信、微博、淘寶等，這些APP里往往會內置一個瀏覽器，我們稱這個瀏覽器為應用內置瀏覽器（也叫WebView），這個內置的瀏覽器一般功能比較簡單，并且客戶端開發(fā)人員可以更改這個瀏覽器的某些設置。3.3、第三方瀏覽器指安裝在手機的瀏覽器如FireFox、Chrome、360等等。在IOS和Android操作系統(tǒng)上自帶瀏覽器、應用內置瀏覽器都是基于Webkit內核的。四、屏幕適配經過分析我們得到，移動頁面最理想的狀態(tài)是，避免滾動條且不被默認縮放處理，我們可以通過設置

<metaname="viewport"content="">來進行控制，并改變?yōu)g覽器默認的layoutviewport的寬度。1、viewport詳解viewport是由蘋果公司為了解決移動設備瀏覽器渲染頁面而提出的解決方案，后來被其它移動設備廠商采納，其使用參數如下：通過設置屬性

content=""

實現，中間以逗號分隔。示例：<metaname="viewport"content="width=device-width,initital-scale=1.0,user-scalable=no">width

：設置layoutviewport寬度，其取值可為數值或者device-width。height：設置layoutviewport高度，其取值可為數值或者device-heightinitital-scale：設置頁面的初始縮放值，為一個數字，可以帶小數。maximum-scale：允許用戶的最大縮放值，為一個數字，可以帶小數。minimum-scale：允許用戶的最小縮放值，為一個數字，可以帶小數。user-scalable：是否允許用戶進行縮放，值為"no"（不能縮放）或"yes"（可以縮放）。注：device-width和device-height就是idealviewport的寬和高。2、控制縮放設置

<metaname="viewport"content="initial-scale=1">，這時我們發(fā)現網頁沒有被瀏覽器設置縮放。設置

<metaname="viewport"content="width=device-width">，這時我們發(fā)現網頁也沒有被瀏覽器設設置縮放。當我們設置

width=device-width，也達到了

initial-scale=1

的效果，得知其實

initial-scale=idealviewport/layoutviewport。兩種方式都可以控制縮放，開發(fā)中一般同時設置width=device-width和initial-scale=1.0（為了解決一些兼容問題）<metaname="viewport"content="width=device-width,initial-scale=1.0">3、適配方案關于em和remem是相對長度單位（參照父元素），其參照當前元素字號大小，如果當前元素未設置字號則會繼承其祖先元素字號大小。例如：.box{font-size:16px;}

則1e

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論