在網上廣泛搜尋後終於找到了解決辦法：
meta標籤起決定性作用
<meta
name
="viewport"
content
="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
在網頁的中增加這句話，可以讓網頁的寬度自動適應手機螢幕的寬度。元素可提供有關頁面的元資訊。
標籤位於文件的頭部，不包含任何內容。
標籤的屬性定義了與文件相關聯的名稱/值對。
width=device-width ：表示寬度是裝置螢幕的寬度
initial-scale=1：表示初始的縮放比例
minimum-scale=1：表示最小的縮放比例
maximum-scale=1：表示最大的縮放比例
user-scalable=no：表示使用者是否可以調整縮放比例！！！切記： 利用這種方法來使網頁自適應手機螢幕之後，在頁面布局中，css定義寬度的時候最好不要使用具體的值（例如xx px），而是應該使用百分比（例 50%）。
還有另一種方法是利用 js **來使其適應螢幕大小，但是我用的效果並不太好
function bodyscale()
window.onload = window.onresize = function () ;
網頁自適應pc端和移動端
手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。很多 的解決方法，是為不同的裝置提供不同的網頁，比如專門提供乙個mobile版本，...
移動端PC端自適應
查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...
pc端網頁自適應顯示在移動端
當我們將乙個pc端的網頁放到移動端的時候，移動端瀏覽器會將pc端的網頁按照一定的比例完整的顯示出來，這是因為移動端的瀏覽器預設的會將網頁渲染在乙個比例比較大的viewport中排版 ios預設的是980px，android4.0以上為980px 然後通過比例縮放看到整個頁面的全貌。但是,使用預設的v...