1、面縮(╯‵□′)╯使用meta標簽設置viewport屬性
在HTML文件的放無(wú)頭部添加以下代碼:
“`html
<meta name="viewport" content="width=devicewidth??, initialscale=1.0, maximumscale=1.0, userscalable=no">
“`
解釋?zhuān)?/p>
width=devicewidth:設置視口寬度為設備寬???度。
in??itialscale(′?_?`)=1.0:設置初始縮放比例為1.0。何禁
maximumscale=1.0:設置最大縮放比例為1.0。止頁(yè)??
userscalable=no:禁止用戶(hù)手動(dòng)縮放頁(yè)面。面縮
2、放無(wú)使用JavaScript禁用縮放功能
在HTML文件的何禁頭部(′?`*)添加(╥_╥)以下代碼:
“`html
<script>
document.addEventListener("toヾ(′ω`)?uchmove", function (event) {
if (event.scale !== 1) {
event??.preventDefault();
}
}, { passive: false });
</script>
“`
解釋?zhuān)?/p>
監聽(tīng)觸摸移動(dòng)事件(touchmove)。
如果觸摸事件的止頁(yè)( ?▽?)縮放比例不為1,則阻止默認(ren)行為,面縮即禁止縮放。放無(wú)
passive: false表示不使用(yong)被動(dòng)模式??,何(′_ゝ`)禁以便能夠阻ヽ(′▽?zhuān)?ノ止默認行為。止頁(yè)
3、ヾ(′?`)?面縮使用CSS樣式限制縮放
在HTML文件的頭(tou)部添加以下代碼:
“`html
<style>
* {
moztransform: scale(1); /* Firefox */
mstransform: scale(1); /* Internet Explorer */
otransform: scale(1); /* Opera */
webkittransform: scale(1); /* Webkit browsers */
}
</style>
“`
解釋?zhuān)?/p>
使用CSS的transform屬性將元(???)素的縮放比例設置為1,以禁止縮放。
針對不同瀏覽器(qi)的兼容性,使用了不同的前綴。


網(wǎng)站二維碼
導航
電話(huà)
短信
咨詢(xún)
地圖
分享