導讀:SEO教程SEO教程百度公開鼓勵站長們多用HTML5技術做PC站與移動站，而HTML5設計的網站的一個優點就是實現自適應特別方便，它能識別終端設備屏幕的大小從而對輸出的內容做出響應網站建設網站優化seo培訓。

百度公開鼓勵站長們多用HTML5技術做PC站與移動站，而HTML5設計的網站的一個優點就是實現自適應特別方便，它能識別終端設備屏幕的大小從而對輸出的內容做出響應調整。眾所周知，現 […]

百度公開鼓勵站長們多用HTML5技術做PC站與移動站，而HTML5設計的網站的一個優點就是實現自適應特別方便，它能識別終端設備屏幕的大小從而對輸出的內容做出響應調整。眾所周知，現在的終端屏幕尺寸分類太多，各種移動設備也層出不窮，這個技術就完美解決了在不同的終端設備上呈現相同的網頁效果。

自適應網站的用戶體驗很好，也很利于優化，但是對于一些基本的配置，不少站長都不是很清楚，余斗今天總結幾點：

1、阻止建設網站移動瀏覽器重構頁面大小

大部分的終端瀏覽器都會在載入頁面的時候自動調整大小，如果不加以設置，會導致布局錯誤，現在主流的ios和安卓瀏覽器都是基于 webkit核心，都支持 viewport meta元素覆蓋默認的畫布縮放設置，只需在HTML的標簽中插入一個標簽：

<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

代碼表示是將一個頁面放到設備實際尺寸兩倍顯示。

2、更改網頁為百分比布局

傳統的網頁布局都是固定網頁寬度，這樣的缺點就是當某個瀏覽窗口處于媒體查詢固定的范圍之外時，網頁就以水平滾動才可以完整瀏覽。

自適應網站要避免這個缺點必須要以百分比布局來構架頁面。在樣式表中不要以 width:xxx px;而是指定一個百分比寬度：width:xx%;或者直接就是width:auto;比如我們定義的head頁面寬度為940px，頁面整個寬度為960px，那么我們在css中寫head的寬度時應為：

#header {             margin-right: 10px;             margin-left: 10px;             width: 97.916667% /* 940 ÷ 960 */                 }

關鍵詞標簽: 自適應 優化配置