HTML页面根据访问终端,缩放页面
参考帖子
https://www.cnblogs.com/sese/p/5629404.html
基本逻辑
先判断访问终端(根据内核),是否是移动端
在根据,终端类型,用meta属性,来实现,页面(初次)加载时的缩放比例,最大缩放比例,最小缩放比例,是否能缩放等相关配置
js相关代码
//判断登录终端
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"
];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
//flag==true,是pc端
//flag==false,是上述添加的移动端
if (flag) {
let meta = document.createElement('meta');
// pc端,不做缩放
meta.content = 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
meta.name = 'viewport';
document.getElementsByTagName('head')[0].appendChild(meta);
} else {
let meta = document.createElement('meta');
//非pc端的情况,做0.1的缩放
meta.content = 'width=device-width, initial-scale=0.1';
meta.name = 'viewport';
document.getElementsByTagName('head')[0].appendChild(meta);
}
return flag;
}