首頁 > web前端 > html教學 > 一個手機自適應的網頁效果解決顯示頁面很小的問題_HTML/Xhtml_網頁製作

一個手機自適應的網頁效果解決顯示頁面很小的問題_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:38:22
原創
1873 人瀏覽過

工作需要,要做一個手機自適應的網頁效果,終於搞定,先分享並記錄!

其實主要就是改掉HTML頁面聲明:

在網頁中加入以下程式碼,就可以正常顯示了:

複製程式碼
程式碼如下:



解釋:

width - viewport的寬度
height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放

精簡點的話,可以把上面的程式碼改為以下程式碼,效果是一樣的:

複製程式碼
複製程式碼


代碼如下:



最後就是不要設定太大的具體寬度屬性了,例如你在網頁把Body的寬度屬性設為1000px,這肯定是不行的了,但是可以設定為90%,這是螢幕自適應的。 PS:本人做了個效果頁面,可以用手機正常顯示哦,
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板