H5實現移動端禁止頁面縮放(適用Android和IOS)


要實現Android和IOS瀏覽器禁止頁面縮放,通用的設置方式是給HTML頁面設置meta標簽來實現,具體添加標簽內容如下:

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

標簽屬性說明:

width           // 設置 viewport 的寬度,正整數/字符串 device-width
height          // 設置 viewport 的高度,正整數/字符串 device-height
initial-scale      // 設置設備寬度與 viewport大小之間的縮放比例,0.0-10.0之間的正數
maximum-scale     // 設置最大縮放系數,0.0-10.0之間的正數
minimum-scale     // 設置最小縮放系數,0.0-10.0之間的正數
user-scalable     // 如果設置為 no 用戶將不能縮放網頁,默認為 yes,yes / no

注意:iOS10以后版本不接受meta標簽,可以通過js監聽手勢控制來實現禁止頁面縮放:

document.addEventListener('gesturestart', function (event) {
    event.preventDefault()
})

 


免責聲明!

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



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