基于jQuery解決ios10以上版本縮放問題
具體代碼如下所示:
<script type="text/javascript">
/*解決ios10以上版本縮放問題 20171102*/
window.onload=function () {
document.addEventListener('touchstart',function (event) {
if(event.touches.length>1){
event.preventDefault();
}
})
var lastTouchEnd=0;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false)
}
</script>
補充:下面看下ios10中禁止用戶縮放頁面
在ios10前我們能通過設(shè)置meta來禁止用戶縮放頁面:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
在ios10系統(tǒng)中meta設(shè)置失效了:
為了提高Safari中網(wǎng)站的輔助功能,即使網(wǎng)站在視口中設(shè)置了user-scalable = no,用戶也可以手動縮放。
解決方法:監(jiān)聽事件來阻止
window.onload=function () {
document.addEventListener('touchstart',function (event) {
if(event.touches.length>1){
event.preventDefault();
}
})
var lastTouchEnd=0;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false)
}
總結(jié)
以上所述是小編給大家介紹的基于jQuery解決ios10以上版本縮放問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實現(xiàn)鼠標經(jīng)過時高亮,同時其他同級元素變暗的效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標經(jīng)過時高亮,同時其他同級元素變暗的效果,涉及jQuery基于事件響應(yīng)機制的頁面元素遍歷與屬性變換操作技巧,需要的朋友可以參考下2016-09-09
jQuery簡單實現(xiàn)向列表動態(tài)添加新元素的方法示例
這篇文章主要介紹了jQuery簡單實現(xiàn)向列表動態(tài)添加新元素的方法,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
根據(jù)郵箱的域名跳轉(zhuǎn)到相應(yīng)的登錄頁面的代碼
其實主要是想記錄一下這種對象的用法,喜歡的朋友可以參考下2012-02-02

