首先，我們需要調(diào)整自適應(yīng)網(wǎng)頁(yè)代碼，防止手機(jī)瀏覽器自動(dòng)調(diào)整頁(yè)面大小。 iOS 和Android 瀏覽器都基于webkit 內(nèi)核。這兩款瀏覽器和其他很多瀏覽器都支持viewport meta element來(lái)覆蓋默認(rèn)設(shè)置畫布縮放，只需要在HTML head標(biāo)簽中插入一個(gè)meta標(biāo)簽，就可以設(shè)置具體的寬度（比如像素值）或元標(biāo)記中的縮放比例為2.0。

然后修改網(wǎng)頁(yè)為百分比布局。當(dāng)瀏覽窗口超出媒體查詢的固定范圍時(shí)，需要水平滾動(dòng)網(wǎng)頁(yè)才能完整瀏覽。使用百分比布局，頁(yè)面元素可以根據(jù)窗口大小放置在一個(gè)接一個(gè)媒體查詢之間。靈活的樣式修正，具體來(lái)說(shuō)，css代碼不會(huì)指定具體的像素寬度，而是會(huì)指定百分比寬度，或者直接width:auto。

最后說(shuō)一下響應(yīng)式網(wǎng)站對(duì)百度友好的要點(diǎn)。

1.applicable-device標(biāo)注應(yīng)該怎么寫

自適應(yīng)設(shè)計(jì)的網(wǎng)頁(yè)，還要兼顧百度友好設(shè)計(jì)，即告訴百度“我是自適應(yīng)頁(yè)面”，方便百度識(shí)別和驗(yàn)證。方法也很簡(jiǎn)單，只需要在上面的viewport標(biāo)簽下添加一個(gè)applicable-device標(biāo)簽即可：

meta name='applicable-device' content='pc,mobile' 表示該頁(yè)面適合在移動(dòng)設(shè)備和PC上瀏覽。

2.在使用百度站長(zhǎng)平臺(tái)鏈接提交工具的sitemp進(jìn)行提交時(shí)，要做mobile type標(biāo)記，具體取值：

mobile:mobile type='pc,mobile'/

其他網(wǎng)頁(yè)采用以下值：

mobile:mobile/: 移動(dòng)網(wǎng)頁(yè)

mobile:mobile type='mobile'/: 移動(dòng)網(wǎng)頁(yè)

mobile:mobile type='htmladapt'/: 代碼適配

本文來(lái)自推來(lái)客：企業(yè)網(wǎng)站設(shè)計(jì)

我們專注高端建站，小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！