2024年强制允许移动浏览器放大/缩小变焦方案

所有Web浏览器App都存在可访问性设置。
在可访问性设置中,无视为盲人(或视力不好的人)在Web上设置的Meta标签的Viewport,在App上强制允许放大/缩小。

（左）三星网络转换成disable的样子，（右）转换成chrome enable的样子

该设定,一般Default值是false,但在三星网络App、歌剧App、Naver Whale App中,虽然不知道该接近性设定是什么原因,但确认了Default值是true。

访问设置 Default 值	Chrome App	Naver App	Naver Wale App	Opera App	Firefox App	Safari App	三星网络 App
(Android) 允许 Web 强制缩放	Disable	Disable	Enable	Enable	Disable	N/A	Enable
(iOS) 允许 Web 强制缩放	Disable	Disable	Enable	Enable	Disable	Enable	N/A

※ 相关报道
https://blogs.opera.com/mobile/2015/12/force-enable-zoom-opera-34-for-android/

从Web开发的立场来看,无视Web的元标签(<meta>)的App的这种设定真是不像话的接近性设定。 坦率地说,因为网站完全不考虑盲人,所以有这样的设定,虽然可以理解100次千次,但是这个接近性设定值是Default Enable,是没有考虑开发立场的。

来源:树位 (翻起)

来源:树维基（打破框架）
虽然不知道大家会不会喜欢神奇宝贝,但是有叫"打破框架"的东西。 打破框架是忽视对方特性的口袋妖怪的特性。 我认为这样的弦是打破框架的案例。 其实我不太清楚为什么案例只存在于特定的App中。 但是，没有什么不可以的。 可以回去一点...



不同浏览器的javaScript event是不同的。 Android和iOS从网络套件引擎开始就不同,大多数iOS机器支持的方法和iOS 14以上的Landscape又有所不同。

手指一碰，就会发生touchstart活动。 event.touches.length와 event.targetTouches.如果length中有一人超过1,就相当于用两个手指触碰,因此在这种情况下,从根本上来说,有被阻止的客户端,也有不被阻止的客户端。

首先,meta标签中Viewport标签变更时,受影响的案例是Android。 iOS即使画面内的DOM中元标签变更,也不会回到原来的Zoom Level。但是,Android的情况是,如果Viewport标签变更,具有想要跟随最新Viewport标签的性质。

将touchstart活动和第一种方法混合在一起,可以提供最基本的解决方案。 使用两点时,将meta标签改为如下。

// 第一种方法
var $metaViewport document.querySelector('meta[name="viewport"]');
$metaViewport.content = 'width=device-width,initial-scale=0.99,minimum-scale=1.0,user-scalable=no';
$metaViewport.content = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no';

 

如果使用上述方法,尝试移动放大时,画面会卡顿,试图恢复原状。 因此,如果加入Alert窗口告知用户,就不会感到尴尬。

// 第二种方法
alert("在该页面不能使用移动放大/缩小。");
var $metaViewport document.querySelector('meta[name="viewport"]');
$metaViewport.content = 'width=device-width,initial-scale=0.99,minimum-scale=1.0,user-scalable=no';
$metaViewport.content = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no';

但是,在iOS 14以上的Landscape中,防止Pinch zoom的方法并不容易。 虽然存在Double tab zoom,也有很多文章,但是比起封锁核电站,更有必要利用变相手段解决情况。

// 第三种方法
var lastScale = 1;
setInterval(function() {
	if (lastScale > 1 && window.visualViewport.scale > 1) {
    	alert("本页面不提供缩放功能");
        location.replace(location.href + '&randomStr=' + randomStr);
    }
    lastScale = window.visualViewport.scale;
}, 700);

如果上述方法行不通,只要使用第3种方法,画面就会被刷新。 那么,即使放大到Landscape iOS 14以上,也可以与之前的Zoom Level进行比较/验证,刷新画面。