手機網頁顯示內容太小,調整手機端網頁縮放


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

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

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

代碼如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

解釋:

width - viewport的寬度

height - viewport的高度

initial-scale - 初始的縮放比例

minimum-scale - 允許用戶縮放到的最小比例

maximum-scale - 允許用戶縮放到的最大比例

user-scalable - 用戶是否可以手動縮放

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

代碼如下:

<meta content="width=device-width,user-scalable=no" name="viewport">

最后就是不要設置太大的具體寬度屬性了,比如你在網頁把Body的寬度屬性設為1000px,這肯定是不行的了,但是可以設置為90%,這是屏幕自適應的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM