手势缩放网页,用于手机浏览器,仅在via、X浏览器测试过
// ==UserScript==
// @name 【双指缩放网页】
// @namespace https://greasyfork.org/
// @version 241015.18
// @description 手势缩放网页,用于手机浏览器,仅在via、X浏览器测试过
// @author You
// @license MIT
// @run-at document-end
// @match *://*/*
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// ==/UserScript==
(function() {
'use strict';
let viewportContent,minScale=0.3;
const metaViewport=(viewportWidth)=>{
viewportContent=`width=${viewportWidth},user-scalable=no`;
}
/*若同时使用强制缩放相关的脚本,放大网页会左右滚动,需重置*/
const setViewport=()=>document.querySelector('meta[name=viewport]').setAttribute('content',viewportContent),
setZoom=(scale)=>document.body.style.zoom = formatNumber(scale),
hostName=window.location.hostname;
let scale=GM_getValue(hostName+'_jsSetZoom', false);
//测试网页能否自适应屏幕
metaViewport('device-width');
if(!document.querySelector('meta[name=viewport]')){
let e = document.createElement('meta');e.setAttribute('name', 'viewport');e.setAttribute('content', viewportContent);document.head.appendChild(e);
}
let initialScrollWidth=document.body.scrollWidth;
setZoom('1.1');
let zoomScrollWidth=document.body.scrollWidth;
let isAdaptive=initialScrollWidth>zoomScrollWidth+20||initialScrollWidth<=window.screen.availWidth+20;
setZoom('1');
if(isAdaptive){
//隐藏水平滚动条
GM_addStyle("body{overflow-x:hidden;}img{max-width:100%;height:auto}");
}else{
metaViewport(initialScrollWidth);
setViewport();
minScale=1;
}
scale&&setZoom(scale);
// 定义一个变量来存储初始的触摸点位置和缩放级别
let initialDistance = 0;
let initialScale = 1;
// 定义一个函数来处理触摸开始事件
function handleTouchStart(event) {
// 确保触摸点的数量为2
if (event.touches.length === 2) {
// 计算两个触摸点之间的距离
initialDistance = Math.hypot(event.touches[0].pageX - event.touches[1].pageX, event.touches[0].pageY - event.touches[1].pageY);
// 存储初始的缩放级别
initialScale = document.body.style.zoom || 1;
}
}
// 定义一个函数来处理触摸移动事件
function handleTouchMove(event) {
if (event.touches.length === 2) {
setViewport();
// 阻止默认事件,例如页面的滚动
event.preventDefault();
// 计算新的触摸点距离
let currentDistance = Math.hypot(event.touches[0].pageX - event.touches[1].pageX, event.touches[0].pageY - event.touches[1].pageY);
// 计算缩放比例的变化
let scale = Math.max(Math.min(parseFloat((currentDistance / initialDistance) * initialScale),2),minScale);
// 应用新的缩放级别到页面
setZoom(scale);
}
}
// 为触摸事件添加监听器
document.addEventListener('touchstart', handleTouchStart);
document.addEventListener('touchmove', handleTouchMove);
GM_registerMenuCommand(`【临时设置缩放比】`,function(){
let e=prompt('请输入缩放比,建议0.3~1.5之间','0.75');
e&&setZoom(e);
});
GM_registerMenuCommand('【记住当前缩放比】',function(){
let e=document.body.style.zoom;e&&GM_setValue(hostName+'_jsSetZoom',e);
});
GM_registerMenuCommand('【取消记忆缩放比】',function(){GM_deleteValue(hostName+'_jsSetZoom');});
function formatNumber(a, b = 3) {
// 检查 a 是否是整数
if (Math.floor(a) == a) {
return a;
}
// 如果不是整数,则使用 toFixed 并转换回数字类型
return Number(Number(a).toFixed(b));
}
})();