H5移动端开发学习总结
對(duì)于移動(dòng)端開(kāi)發(fā)而言,為了做到頁(yè)面高清的效果,視覺(jué)稿的規(guī)范往往會(huì)遵循以下兩點(diǎn): 1.首先,選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(現(xiàn)在一般選取iphone6的375×667)。之前項(xiàng)目中也用到過(guò)iphone5的320×568。 2.對(duì)于retina屏幕(如: dpr=2),為了達(dá)到高清效果,視覺(jué)稿的畫(huà)布大小會(huì)是基準(zhǔn)的2倍,也就是說(shuō)像素點(diǎn)個(gè)數(shù)是原來(lái)的4倍(對(duì)iphone6而言:原先的375×667,就會(huì)變成750×1334)。
viewport(視口) 3個(gè)視口 layout viewport(布局視口):CSS初始包含塊的尺寸。CSS中所有以百分比為單位的長(zhǎng)度都是根據(jù)它推算出來(lái)的。如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話(huà),某些網(wǎng)站就會(huì)因?yàn)関iewport太窄而顯示錯(cuò)亂,所以這些瀏覽器就決定默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值,比如980px,這樣的話(huà)即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做 layout viewport。 可以通過(guò)document.documentElement.clientWidth來(lái)獲取。 visual viewport(視覺(jué)視口,即用戶(hù)實(shí)際看見(jiàn)的部分):屏幕上顯示的網(wǎng)頁(yè)區(qū)域的尺寸,會(huì)被縮放影響,可以通過(guò)window.innerWidth來(lái)獲取。 ideal viewport(完美視口):完美適配移動(dòng)設(shè)備的viewport,它的寬度等于移動(dòng)設(shè)備的屏幕寬度。有了完美視口,用戶(hù)不用縮放和拖動(dòng)網(wǎng)頁(yè)就能夠很好的進(jìn)行網(wǎng)頁(yè)瀏覽。而完美視口需要通過(guò)viewport meta標(biāo)簽來(lái)進(jìn)行相應(yīng)的設(shè)置。 像素 一個(gè)像素就是計(jì)算機(jī)屏幕能顯示一種特定顏色的最小區(qū)域。屏幕上的像素越多,同一時(shí)間你可以看到的就越多。 設(shè)備物理像素 設(shè)備屏幕的物理像素,任何設(shè)備的物理像素的數(shù)量都是固定的。他是顯示設(shè)備中一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。 CSS像素:px(設(shè)備獨(dú)立像素) 邏輯像素,瀏覽器使用的抽象單位(之所以叫抽象單位,是因?yàn)槠淇梢愿鶕?jù)不同的設(shè)備和不同的關(guān)系來(lái)變大變小,所以稱(chēng)為抽象單位)為Web開(kāi)發(fā)者創(chuàng)造的,在CSS和JavaScript中使用的一個(gè)抽象的層。px是相對(duì)長(zhǎng)度單位,相對(duì)的是設(shè)備物理像素(device pixel) 注意:在舊的屏幕上,當(dāng)縮放程度為100%時(shí),一個(gè)CSS像素等于一個(gè)設(shè)備像素。但當(dāng)在高密度屏幕上,例如蘋(píng)果的視網(wǎng)膜屏幕,一個(gè)CSS像素跨越了多個(gè)設(shè)備像素。如果用戶(hù)縮小到足夠的程度,一個(gè)CSS像素會(huì)變得明顯比一個(gè)設(shè)備像素小。 舉個(gè)例子: 當(dāng)給一個(gè)元素設(shè)置width:200px時(shí),到底會(huì)發(fā)生什么事情? 這個(gè)width為200px的元素跨越了200個(gè)CSS像素。而200個(gè)CSS像素相當(dāng)于多少個(gè)設(shè)備物理像素取決于屏幕的特性(是否是高密度)和用戶(hù)進(jìn)行的縮放。 用戶(hù)放大得越大,一個(gè)CSS像素覆蓋的設(shè)備物理像素就越多。因此,這個(gè)元素不一定會(huì)跨越200個(gè)設(shè)備物理像素。例如:在蘋(píng)果的視網(wǎng)膜屏幕上,視網(wǎng)膜屏幕的像素密度是普通屏幕的兩倍,那么這個(gè)元素就跨越了400個(gè)設(shè)備物理像素。如果用戶(hù)放大,它將跨越更多的設(shè)備物理像素。 再比如以iphone6為例: 設(shè)備寬高為375×667,可以理解為設(shè)備獨(dú)立像素(或CSS像素)。 其dpr為2,根據(jù)上面的計(jì)算公式,其設(shè)備物理像素就應(yīng)該×2,為750×1334。
位圖像素 一個(gè)位圖像素是柵格圖像(如:png, jpg, gif等)最小的數(shù)據(jù)單元。每一個(gè)位圖像素都包含著一些自身的顯示信息(如:顯示位置,顏色值,透明度等)。 理論上:1個(gè)位圖像素對(duì)應(yīng)于1個(gè)物理像素,圖片才能得到完美清晰的展示。 在普通屏幕下是沒(méi)有問(wèn)題的,但是在retina屏幕下就會(huì)出現(xiàn)位圖像素點(diǎn)不夠,從而導(dǎo)致圖片模糊的情況。對(duì)于dpr=2的retina屏幕而言,1個(gè)位圖像素對(duì)應(yīng)于4個(gè)物理像素,由于單個(gè)位圖像素不可以再進(jìn)一步分割,所以只能就近取色,從而導(dǎo)致圖片模糊。 所以,對(duì)于圖片高清問(wèn)題,比較好的方案就是兩倍圖片(@2x)。 如:200×300(css pixel)img標(biāo)簽,就需要提供400×600的圖片。 如此一來(lái),位圖像素點(diǎn)個(gè)數(shù)就是原來(lái)的4倍,在retina屏幕下,位圖像素點(diǎn)個(gè)數(shù)就可以跟物理像素點(diǎn)個(gè)數(shù)形成 1 : 1的比例,圖片自然就清晰了(這也解釋了之前留下的一個(gè)問(wèn)題,為啥視覺(jué)稿的畫(huà)布大小要×2?)。
屏幕尺寸 屏幕尺寸:指屏幕的對(duì)角線(xiàn)的長(zhǎng)度,單位是英寸。
設(shè)備像素比(device pixel ratio) 設(shè)備像素比簡(jiǎn)稱(chēng)為dpr,其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按下面的公式計(jì)算得到: 設(shè)備像素比 = 設(shè)備物理像素 / 設(shè)備獨(dú)立像素 計(jì)算公式: 1px = (dpr)^2dp; 獲得設(shè)備像素比后,便可得知設(shè)備像素與CSS像素之間的比例。當(dāng)這個(gè)比率為1:1時(shí),使用1個(gè)設(shè)備像素顯示1個(gè)CSS像素。當(dāng)這個(gè)比率為2:1時(shí),使用4個(gè)設(shè)備像素顯示1個(gè)CSS像素,當(dāng)這個(gè)比率為3:1時(shí),使用9(33)個(gè)設(shè)備像素顯示1個(gè)CSS像素。 在JavaScript中,可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。而在CSS中,可以通過(guò)-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢(xún),對(duì)不同dpr的設(shè)備,做一些樣式適配 為什么iPhone5是320px586px? 就是因?yàn)槠鋎pr = 2 dpr = 2表示一個(gè)CSS像素等于4個(gè)物理像素 所以:640dp1136dp = 320px*568px
iphone5對(duì)外宣稱(chēng)的640*1136是物理像素,而我們實(shí)際開(kāi)發(fā)中用的px是邏輯像素。
DPI:打印機(jī)每英寸可以噴的墨汁點(diǎn) PPI(pixel per inch):屏幕每英寸的像素?cái)?shù)量,即單位英寸內(nèi)的像素密度 PPI越高,像素?cái)?shù)越高,圖像越清晰。 ppi和dpi是同一個(gè)概念,Android比較喜歡使用dpi,IOS比較喜歡使用ppi。 但是可視度越低(小),系統(tǒng)默認(rèn)設(shè)置縮放比越大 Retina屏(高清屏):dpr都是大于等于2
meta標(biāo)簽
標(biāo)簽有很多種,而這里要著重說(shuō)的是viewport的meta標(biāo)簽,其主要用來(lái)告訴瀏覽器如何規(guī)范的渲染W(wǎng)eb頁(yè)面,而你則需要告訴它視窗有多大。 手機(jī)瀏覽器是把頁(yè)面放在一個(gè)虛擬的”視口”(viewport)中,視口可大于或小于手機(jī)屏幕的可視區(qū)域,一般手機(jī)默認(rèn)viewport大于可視區(qū)域。這樣不會(huì)破壞沒(méi)有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁(yè)的布局,用戶(hù)可以通過(guò)平移和縮放來(lái)看網(wǎng)頁(yè)的其他部分。 設(shè)置頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度,并禁止用戶(hù)及縮放頁(yè)面 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1, user-scalable=no" /> 復(fù)制代碼上述屬性基本含義:
width=device-width 用來(lái)指定 layout viewport(布局視口) 的大小,device-width 為設(shè)備的寬度。如果不指定該屬性(或者移除viewport meta標(biāo)簽),則layout viewport寬度為瀏覽器默認(rèn)值。如:iPhone為980px。
<meta name="viewport" content="width=device-width" /> 復(fù)制代碼這樣一來(lái)layout viewport將成為ideal viewport(完美視口),因?yàn)閘ayout viewport寬度與設(shè)備視覺(jué)視口寬度一致了。 除此之外,我們還可以通過(guò)設(shè)置initial-scale=1來(lái)實(shí)現(xiàn)ideal viewport。
<meta name="viewport" content="initial-scale=1" /> 復(fù)制代碼initial-scale – 初始的縮放比例 minimum-scale – 允許用戶(hù)縮放到的最小比例 maximum-scale – 允許用戶(hù)縮放到的最大比例。1.0表示不縮放 user-scalable – 用戶(hù)是否可以手動(dòng)縮放,no表示不可以手動(dòng)縮放
忽略將頁(yè)面中的數(shù)字識(shí)別為電話(huà)號(hào)碼:
<meta name="format-detection" content="telephone=no" /> 復(fù)制代碼忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別:
<meta name="format-detection" content="email=no" /> 復(fù)制代碼給頁(yè)面設(shè)置最大寬度和最小寬度 如果在頁(yè)面中我們使用rem結(jié)合js動(dòng)態(tài)計(jì)算font-size值來(lái)實(shí)現(xiàn)多屏幕適配,這種方式可以無(wú)限適配最大和最小的終端屏幕。但是當(dāng)屏幕超過(guò)一定的尺寸以后還繼續(xù)顯示h5頁(yè)面的話(huà)會(huì)給用戶(hù)帶來(lái)不好的體驗(yàn)。因此,我們需要給頁(yè)面設(shè)置最大的寬度和最小寬度。 比如:
{max-width:640px;min-width:320px; } 復(fù)制代碼line-height屬性的問(wèn)題 line-height 的一個(gè)主要作用是:使得文本在父級(jí)元素中垂直居中。 屬性值:
normal 默認(rèn)。設(shè)置合理的行間距。 number 設(shè)置數(shù)字,此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距。 length 設(shè)置固定的行間距。% 基于當(dāng)前字體尺寸的百分比行間距。 inherit 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。 lineheight屬性很有用,但是也存在一些問(wèn)題:
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>lineheight</title><style type="text/css">.box{font-size: 100px;border: 1px solid red;/*line-height: 100%;*/}</style> </head> <body> <div class="box">我是超大字體</div> </body> </html> 復(fù)制代碼從上圖,我們發(fā)現(xiàn)字體和父元素上下之間有點(diǎn)小間距。這里我們可以通過(guò)給父元素設(shè)置line-height:100%來(lái)解決這個(gè)問(wèn)題。 上下的小間距是由于line-height 與 font-size 的計(jì)算值之差造成的。當(dāng)設(shè)置為line-height 的值為100%的時(shí)候,line-height的值就等于 font-size的尺寸,此時(shí)的空白間距為0。
小知識(shí)點(diǎn) 撥打電話(huà)代碼:
<a href="tel:1234567890">打電話(huà)給:1234567890</a> 復(fù)制代碼發(fā)短信代碼:
<a href="sms:1234567890">發(fā)短信給:1234567890</a> 復(fù)制代碼調(diào)用手機(jī)系統(tǒng)自帶的郵件功能代碼:
<p><a href="mailto:dlut123@126.com">發(fā)電子郵件</a></p> 復(fù)制代碼rem自適應(yīng)原理 rem是根據(jù)html的font-size大小來(lái)變化,正是基于這個(gè)出發(fā),我們可以在每一個(gè)設(shè)備下根據(jù)設(shè)備的寬度設(shè)置對(duì)應(yīng)的html字號(hào),從而實(shí)現(xiàn)了自適應(yīng)布局
調(diào)整html元素大小的值 有css與js兩種方式 css方式:
html { font-size: calc(100vw / 3.75); } 復(fù)制代碼除以3.75這里是以iphone6為設(shè)計(jì)稿為標(biāo)準(zhǔn)的,100vw表示設(shè)備寬度。為了使得html的字體大小為100px,這樣我們?cè)趽Q算的時(shí)候,1px 就是0.01rem,就很方便我們計(jì)算。 js方式: 我們只需要監(jiān)聽(tīng)resize事件即可
document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px'; $(window).on('resize', function() {document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px'; }) 復(fù)制代碼為了避免在一些手機(jī)瀏覽器上不支持calc,vm這些CSS3新屬性,在實(shí)際應(yīng)用中最好還是使用js方式。
相關(guān)參考博文:
移動(dòng)端高清、多屏適配方案
移動(dòng)前端第一彈:viewport詳解
兩個(gè)viewport的故事(第一部分)
移動(dòng)前端開(kāi)發(fā)之viewport的深入理解
深入了解viewport和px
走向視網(wǎng)膜(Retina)的Web時(shí)代
viewports剖析
利用視口單位實(shí)現(xiàn)適配布局
總結(jié)
以上是生活随笔為你收集整理的H5移动端开发学习总结的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: C/S框架网介绍|.NET快速开发平台|
- 下一篇: UIProgressView的使用