HELLO,WEBAPP.基礎知識

1、先明白幾個概念

phys.width:

device-width:

    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">


    <meta content="telephone=no,email=no" name="format-detection">

content屬性值 :

     width:可視區域的寬度，值可爲數字或關鍵詞device-width

     height:同width

     intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放

     maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，

              maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。

     user-scalable:是否可對頁面進行縮放，no 禁止縮放

 

---

 

通常咱們所指的寬度width即爲phys.width，而device-width又稱爲css-width。

其中咱們能夠獲取phys.width即width經過document.documentElement.clientWidth;而獲取css-width經過 window.screen.width獲取。如iphone6的phys.width爲750px，而css-width爲375px。

 

2、明白一個瀏覽器默認行爲。

試想，瀏覽器若是把電腦端的980px的網頁展示在寬度爲750px的iphone6手機屏上，勢必會放不下，手機端橫向會出現滾動條，怎麼阻止這種狀況呢，很簡單，瀏覽器默認一個虛擬窗口，不一樣瀏覽器有不一樣的虛擬窗口寬度的默認值如：safari iphone：980px;

opera:850px; Andriod webkit:800px;IE:974px;而後會把這個980px虛擬窗口裝進寬度爲750px的iphone6中，固然這樣的話必須縮放，這就是爲何在手機中展示電腦端頁面沒有出現橫向滾動條，並且字跡明顯變小的緣由。

 

3、講解

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

meta標籤中，width有兩個含義，第1、width爲phys.width，第二，width也爲虛擬窗口的width。這樣就會有兩個結果：

第1、此時的iPhone6的phys.width也變成了css-width即375px，咱們能夠經過document.documentElement.clientWidth獲取獲得此時phys.width確實爲375px。

第2、如你設計的是375px的手機端頁面，此時的虛擬窗口的寬度也爲375px，再裝進phys.width爲375px的手機，固然如設計稿同樣的效果，不會縮放，也不會出現橫向滾動條。

 

4、對響應式佈局，媒體查詢的影響

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

如沒有meta標籤，此時的width固然即爲phys.width，iPhone6就不會執行上邊的括號裏邊的代碼，可是有了meta標籤之後呢，width變成了css-width，即爲375px,，因此是會執行代碼的。

 

5、論meta標籤的影響

從上邊能夠看出，有了meta標籤之後，本來的iPhone6，即像素比爲2的手機，能夠按照css-width相同的像素比爲1的手機同樣正常顯示，像素比更高的手機也能正常顯示。固然如今andriod的2K屏在meta標籤的幫助下也能正常顯示。即對於開發者來講，已經能夠無論手機的像素比，只需按照css像素編寫代碼便可。