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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

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

window.devicePixelRatio

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

layoutviewport

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

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

content=""

實(shí)現(xiàn)，中間以逗號(hào)分隔。示例：<metaname="viewport"content="width=device-width,initital-scale=1.0,user-scalable=no">width

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

<metaname="viewport"content="initial-scale=1">，這時(shí)我們發(fā)現(xiàn)網(wǎng)頁沒有被瀏覽器設(shè)置縮放。設(shè)置

<metaname="viewport"content="width=device-width">，這時(shí)我們發(fā)現(xiàn)網(wǎng)頁也沒有被瀏覽器設(shè)設(shè)置縮放。當(dāng)我們設(shè)置

width=device-width，也達(dá)到了

initial-scale=1

的效果，得知其實(shí)

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

則1e

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論