隨著3G的普及，越來(lái)越多的人使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。于是，網(wǎng)頁(yè)設(shè)計(jì)師不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)？本篇文章將講述自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法，使網(wǎng)頁(yè)開(kāi)發(fā)人員維護(hù)同一個(gè)網(wǎng)頁(yè)代碼，即可使網(wǎng)站在多種設(shè)備上具有更好的閱讀體驗(yàn)。本文詳細(xì)介紹了自適應(yīng)網(wǎng)頁(yè)的實(shí)現(xiàn)方法，希望能給迷惑的你帶來(lái)幫助。
一. 在HTML的頭部加入meta標(biāo)簽
在HTML的頭部，也就是head標(biāo)簽中增加meta標(biāo)簽，告訴瀏覽器網(wǎng)頁(yè)寬度等于設(shè)備屏幕寬度，且不進(jìn)行縮放，代碼如下：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
簡(jiǎn)單分析一下這一行代碼的含義：width=device-width表示網(wǎng)頁(yè)的寬度等于設(shè)備屏幕的寬度，initial-scale=1.0表示設(shè)置頁(yè)面初始的縮放比例為1，user-scalable=no表示禁止用戶進(jìn)行縮放，maximum-scale=1.0 和 minimum-scale=1.0 表示設(shè)置最大的和最小的頁(yè)面縮放比例。因?yàn)楦鞔鬄g覽器對(duì)meta標(biāo)簽的解析程度不一樣，所以我們要盡可能的去兼容所有瀏覽器。
