快捷導(dǎo)航

自適應(yīng)布局meta標(biāo)簽中viewport、content、width、initial-scale、minimum-scale、maximum-scale總結(jié)

更新時(shí)間：2017年08月18日 10:37:22 作者：wbxjiayou

這篇文章主要介紹了移動(dòng)客戶(hù)端手機(jī)頁(yè)面布局時(shí)各標(biāo)簽元素作用和適用情景，通過(guò)詳解幾種屬性讓讀者更明確自適應(yīng)布局的注意點(diǎn)，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。

一、先明白幾個(gè)概念

phys.width:

device-width:

一般我們所指的寬度width即為phys.width，而device-width又稱(chēng)為css-width。

其中我們可以獲取phys.width即width通過(guò)document.documentElement.clientWidth;而獲取css-width通過(guò) window.screen.width獲取。如iphone6的phys.width為750px，而css-width為375px。

二、明白一個(gè)瀏覽器默認(rèn)行為。

試想，瀏覽器如果把電腦端的980px的網(wǎng)頁(yè)展現(xiàn)在寬度為750px的iphone6手機(jī)屏上，勢(shì)必會(huì)放不下，手機(jī)端橫向會(huì)出現(xiàn)滾動(dòng)條，怎么阻止這種情況呢，很簡(jiǎn)單，瀏覽器默認(rèn)一個(gè)虛擬窗口，不同瀏覽器有不同的虛擬窗口寬度的默認(rèn)值如：safari iphone：980px;

opera:850px; Andriod webkit:800px;IE:974px;然后會(huì)把這個(gè)980px虛擬窗口裝進(jìn)寬度為750px的iphone6中，當(dāng)然這樣的話(huà)必須縮放，這就是為什么在手機(jī)中展現(xiàn)電腦端頁(yè)面沒(méi)有出現(xiàn)橫向滾動(dòng)條，而且字跡明顯變小的原因。

三、講解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1

meta標(biāo)簽中，width有兩個(gè)含義，第一、width為phys.width，第二，width也為虛擬窗口的width。這樣就會(huì)有兩個(gè)結(jié)果：

1、此時(shí)的iPhone6的phys.width也變成了css-width即375px，我們可以通過(guò)document.documentElement.clientWidth獲取得到此時(shí)phys.width確實(shí)為375px。

2、如你設(shè)計(jì)的是375px的手機(jī)端頁(yè)面，此時(shí)的虛擬窗口的寬度也為375px，再裝進(jìn)phys.width為375px的手機(jī)，當(dāng)然如設(shè)計(jì)稿一樣的效果，不會(huì)縮放，也不會(huì)出現(xiàn)橫向滾動(dòng)條。

四、對(duì)響應(yīng)式布局，媒體查詢(xún)的影響

@media only screen and (min-width: 350px) and (max-width: 480px){.....................}

如沒(méi)有meta標(biāo)簽，此時(shí)的width當(dāng)然即為phys.width，iPhone6就不會(huì)執(zhí)行上邊的括號(hào)里邊的代碼，但是有了meta標(biāo)簽以后呢，width變成了css-width，即為375px,，所以是會(huì)執(zhí)行代碼的。

五、論meta標(biāo)簽的影響

從上邊可以看出，有了meta標(biāo)簽以后，原本的iPhone6，即像素比為2的手機(jī)，可以按照css-width相同的像素比為1的手機(jī)一樣正常顯示，像素比更高的手機(jī)也能正常顯示。當(dāng)然現(xiàn)在andriod的2K屏在meta標(biāo)簽的幫助下也能正常顯示。即對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，已經(jīng)可以不管手機(jī)的像素比，只需按照css像素編寫(xiě)代碼即可。

參考鏈接： http://www.fzitv.net/article/121531.htm
參考鏈接： http://www.fzitv.net/article/121524.htm

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助~如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持!

您可能感興趣的文章: