在擁有個人中心型別的**中，無論是響應式還是手機版都繞不過乙個尷尬的問題，那就是內容區無法撐起手機一屏高度。
為此我整理了兩種簡單的方法來讓頁面最小高度為一屏高度。
一、利用jq/js獲取高度計算
首先乙個頁面可以分為三個區域，頭部區，主體內容區，底部區。
頭部區域一直浮動在頂部，和底部區域一樣高度不會變化。所以我們只需要獲取到螢幕高度然後減去頭底部高度就是內容區域的最小高度。$(
function
()})
這樣就可以通過jq讓所有頁面最小高度不會小於手機一屏，js同理使用相同的邏輯即可。
二、利用css中vh單位
vh是css規定的一種視口單位，1vh等於視口高度的1%。
所以我們通過css的計算方法calc就可以輕鬆設定內容區域的最小高度了。不過需要注意的是無論是calc還是vh都對於低版本的瀏覽器不支援，所以要相容低版本的話還是選擇js會更為方便。
在不考慮低版本ie相容下個人比較推薦第二種，畢竟js會浪費部分效能，能用css解決的效果和問題盡量不要使用js。
移動頁面HTML5自適應手機螢幕寬度
標籤 網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 c...
移動頁面HTML5自適應手機螢幕寬度
網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。1 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...
html網頁寬度自動適應手機螢幕
可以通過設定螢幕的縮放比例來實現 一 使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。1 通過設定請求頭實現 在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度。其中 wi...