問題描述
移動端的浏覽器有預設的事件，如手勢縮放事件、輕按兩下放大事件。但有時候會因為一些特殊原因，頁面放大會有問題。已知viewport的設定對新ios無效（輕按兩下、手勢均無效），viewport設定對部分原生浏覽器的無效（輕按兩下有效，手勢無效）。
解決方案
參考網上的方案，下面兩段代碼配合可以解決iso的safari、chrome和安卓chrome
document.addEventListener("gesturestart", function (event) {
event.preventDefault();
});
document.addEventListener("dblclick", function (event) {
event.preventDefault();
});
var lastTouchEnd = 0;
document.addEventListener("touchend"，function (event) {
var now = new Date().getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
},false);
但是，還是被測試發現華為原生浏覽器和三星的原生浏覽器不行，還是可以手勢放大。直接給document的各種事件阻止預設也不行。後來參考以前遇到的問題，想到的辦法就是，在body下把所有内容包在div裡，div占滿屏，給div添加touchmove事件，阻止冒泡到document層，完美解決，也不影響div裡面其他元素的touchmove事件。
<body>
<div id="test"></div>
</body>
html,body,#test{
width:100%;
height:100%;
}
document.getElementById("test").addEventListener("touchmove", function (e) {
e.stopPropagation();
// e.preventDefault(); 預設事件可以自行考慮加不加
},false);
測試機型
iphone safari
iphone chrome
華為 chrome
華為 原生
三星 chrome
三星 原生
潛在問題
在比較極端的情況下，如頁面的執行還沒到這段代碼的時候，使用者已經在縮放了，那這種是沒有辦法處理的，而且一旦這種情況發生，在頁面加載完後，使用者将沒有辦法縮回頁面，就有點尴尬……
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)