html兼容手機瀏覽器


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

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

 

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

解釋:

device-width 是viewport的寬度

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

 

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

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

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

 

<!doctype html>
<html>
    <head>
        <title>手機瀏覽器頁面</title>
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
    </head>

    <body>
        <div>
            此頁面適應手機端瀏覽器
        </div>
    </body>
</html>

 


免責聲明!

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



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