基于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>
補(bǔ)充:下面看下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,用戶也可以手動(dòng)縮放。
解決方法:監(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以上版本縮放問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開發(fā)中有時(shí)需要在頁面上設(shè)置一個(gè)控制面板,默認(rèn)是不顯示的,當(dāng)用戶有需要時(shí)可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。2015-03-03解決jquery validate 驗(yàn)證不通過后驗(yàn)證正確的信息仍殘留在label上的方法
在本篇文章里小編給大家整理了關(guān)于解決jquery validate 驗(yàn)證不通過后驗(yàn)證正確的信息仍殘留在label上的方法,有需要的朋友們可以學(xué)習(xí)下。2019-08-08jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單的方法,實(shí)例分析了jQuery操作css及setTimeout等實(shí)現(xiàn)導(dǎo)航菜單的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jQuery動(dòng)態(tài)添加<input type="file">
有時(shí)候需要在頁面上允許用戶上傳多個(gè)文件,個(gè)數(shù)由用戶自己決定,個(gè)數(shù)多了也可以刪除,使用jQuery可以很簡單的實(shí)現(xiàn)這個(gè)功能2016-04-04在jQuery ajax中按鈕button和submit的區(qū)別分析
昨天在使用jQuery ajax的post方法進(jìn)行頁面?zhèn)髦?,無刷新獲取數(shù)據(jù)展示,弄了半天就是沒有效果,看了半天也沒有語法錯(cuò)誤,最后才終于明白問題出在哪里2012-10-10jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01關(guān)于jQuery.ajax()的jsonp碰上post詳解
這篇文章主要介紹了關(guān)于jQuery.ajax()的jsonp碰上post的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-07-07jQuery多級(jí)手風(fēng)琴菜單實(shí)例講解
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)手風(fēng)琴菜單,菜單效果更有特色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10