1、看了好多博客,都是以下面代码为准
<script type="text/javascript">
// 判断pc浏览器是否缩放,若返回100则为默认无缩放,如果大于100则是放大,否则缩小
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}else if (~ua.indexOf('msie')) { //检测IE浏览器的版本
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio){
ratio = Math.round(ratio * 100);
}
return ratio;
};
//window.onresize 事件可用于检测页面是否触发了放大或缩小。
$(window).on('resize',function(){
isScale();
});
//判断PC端浏览器缩放比例不是100%时的情况
function isScale(){
var rate = detectZoom();
/**if(rate != 100){
//如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!')
}*/
if(rate < 100){
//document.getElementsByTagName('body')[0].style.zoom=3;
//如何让页面的缩放比例自动为100,'transform':'scale(1,1)'没有用,又无法自动条用键盘事件,目前只能提示让用户如果想使用100%的比例手动去触发按ctrl+0
//alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!')
if(rate > 90 && rate <= 99){
document.getElementsByTagName('body')[0].style.zoom = 1.2;
console.log("当前页面显示在90到99之间");
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
}else if(rate > 80 && rate <= 89){
document.getElementsByTagName('body')[0].style.zoom = 1.4;
console.log("当前页面显示在80到89之间");
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
}else if(rate > 70 && rate <= 79){
document.getElementsByTagName('body')[0].style.zoom = 2;
console.log("当前页面显示在70到79之间");
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
}else if(rate > 60 && rate <= 69){
document.getElementsByTagName('body')[0].style.zoom = 1.8;
console.log("当前页面显示在60到69之间");
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
}else if(rate > 50 && rate <= 59){
document.getElementsByTagName('body')[0].style.zoom = 2.6;
console.log("当前页面显示在50到59之间");
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
}else if(rate > 40 && rate <= 49){
document.getElementsByTagName('body')[0].style.zoom = 2.7;
console.log("当前页面显示在40到49之间");
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
}else if(rate < 39){
document.getElementsByTagName('body')[0].style.zoom = 3.7;
console.log("当前页面显示在39之间");
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
}
}else {
console.log("zoom=" + document.getElementsByTagName('body')[0].style.zoom);
//document.getElementsByTagName('body')[0].style.zoom = 0;
}
}
//阻止pc端浏览器缩放js代码
//由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况,只能通过js来控制了
// jqeury version
$(document).ready(function () {
// chrome 浏览器直接加上下面这个样式就行了,但是ff不识别
$('body').css('zoom', 'reset');
$(document).keydown(function (event) {
//event.metaKey mac的command键
if ((event.ctrlKey === true || event.metaKey === true)&& (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)){
event.preventDefault();
}
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
});
});
</script>
但实际上还是需要用户手动修改,不能达到需求。
2、通过下面方法可以固定,但缩放时页面会有细微变化,不过不影响大致功能
//window.onresize 事件可用于检测页面是否触发了放大或缩小。
$(window).on('resize',function(){
pageFixedSize()
});
function pageFixedSize() {
var height = $(window).height();
$('body').css('zoom', height / 720);
}