禁止移動端safari瀏覽器雙擊放大事件

本身在一個微信項目優化過程遇到一個問題,因此記錄下來。廢話不說,下面進入正題。html

1.添加meta便籤ios

首先解決移動端瀏覽器放大問題通常是添加一個meta便籤,防止用戶手動放大網頁問題。瀏覽器

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

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度,同時不容許用戶手動縮放。也許允不容許用戶縮放不一樣的網站有不一樣的要求,但讓viewport的寬度等於設備的寬度,這個應該是你們都想要的效果,若是你不這樣的設定的話,那就會使用那個比屏幕寬的默認viewport,也就是說會出現橫向滾動條。微信

width:測試

控制 viewport 的大小,能夠指定的一個值或者特殊的值,如 device-width 爲設備的寬度(單位爲縮放爲 100% 時的 CSS 的像素)。優化

height:網站

和 width 相對應,指定高度。spa

initial-scale:scala

初始縮放。即頁面初始縮放程度。這是一個浮點值,是頁面大小的一個乘數。例如,若是你設置初始縮放爲「1.0」,若是你設置爲「2.0」,那麼這個頁面就會放大爲2倍。code

maximum-scale:

最大縮放。即容許的最大縮放程度。這也是一個浮點值,用以指出頁面大小與屏幕大小相比的最大乘數。例如,若是你將這個值設置爲「2.0」,那麼這個頁面最多能放大2倍。

user-scalable:

用戶調整縮放。即用戶是否能改變頁面縮放程度。若是設置爲yes則是容許用戶對其進行改變,反之爲no。默認值是yes。若是你將其設置爲no,那麼minimum-scale 和 maximum-scale都將被忽略,由於根本不可能縮放。

以上設置完畢以後,在通常瀏覽器上已經實現了阻止用戶手動放大頁面。可是在ios safari瀏覽器上進行測試,發現雙擊頁面,頁面仍是會放大,那麼咱們進行下一步的設置。

 

2.阻止click事件的觸發

咱們認識的click事件在移動端瀏覽器實際上是默認完整touchstart-touchend這兩個事件的觸發,只要阻止其中的一個事件觸發就能阻止click事件,那麼有人會說爲何不直接禁止掉click事件的觸發?其實若是你沒有點擊的事件的需求的話,

徹底能夠這麼作。可是通常的頁面都仍是須要點擊的事件觸發的。那麼在這裏,咱們的思路能夠用touchstart事件來代替click事件來進行點擊事件的觸發,只要阻止touchend事件的默認事件就能夠的。

    $('body').on('touchend',function(e) {
            e.preventDefault();
        });

這樣就能夠知足點擊事件的觸發,又能夠阻止在ios safari瀏覽器出現頁面雙擊放大。  

相關文章
相關標籤/搜索