首先我們要將自適應(yīng)網(wǎng)頁代碼上做出調(diào)整，阻止移動(dòng)瀏覽器自動(dòng)調(diào)整頁面大小，iOS和Android瀏覽器都基于webkit核心，這兩種瀏覽器以及其他的很多瀏覽器都支持viewport meta元素覆蓋默認(rèn)的畫布縮放設(shè)置，只需在HTML的<head>標(biāo)簽中插入一個(gè)<meta>標(biāo)簽，<meta>標(biāo)簽中可以設(shè)置具體的寬度(如像素值)或者縮放比例2.0。
.jpg)
然后要將網(wǎng)頁修改為百分比布局，當(dāng)某個(gè)瀏覽窗口處于媒體查詢固定的范圍之外，網(wǎng)頁就需要水平滾動(dòng)才能完整瀏覽，而通過百分比布局可以頁面元素根據(jù)窗口大小在一個(gè)又一個(gè)媒體查詢之間靈活修正樣式，具體來講，就是css代碼不會(huì)指定具體像素寬度，而是會(huì)指定一個(gè)百分比寬度，或者直接就是width:auto。
最后在講講響應(yīng)式網(wǎng)站對(duì)百度友好的關(guān)鍵點(diǎn)，
1.applicable-device標(biāo)注應(yīng)該怎么寫
有了自適應(yīng)設(shè)計(jì)的網(wǎng)頁，還要照顧到對(duì)百度友好的設(shè)計(jì)，即告訴百度“我是自適應(yīng)頁面”方便百度進(jìn)行識(shí)別校驗(yàn)。方法也很簡(jiǎn)單，只要在上面viewport標(biāo)簽下面再添加一個(gè)applicable-device標(biāo)簽就行：
<meta name="applicable-device" content="pc,mobile">表示頁面同時(shí)適合在移動(dòng)設(shè)備和PC上進(jìn)行瀏覽。
2.在使用百度站長(zhǎng)平臺(tái)鏈接提交工具的sitemp進(jìn)行提交時(shí)，要做mobile type標(biāo)記，具體取值：
<mobile:mobile type="pc,mobile"/>
其他網(wǎng)頁取值如下：
<mobile:mobile/> ：移動(dòng)網(wǎng)頁
<mobile:mobile type="mobile"/> ：移動(dòng)網(wǎng)頁
<mobile:mobile type="htmladapt"/>：代碼適配
本文章來自于尚品中國(guó)：企業(yè)網(wǎng)站設(shè)計(jì)