JavaScript-js如何检测用户浏览器是否为放大或缩小状态?

需求定制 需求定制 主题:1050 回复:2283

JavaScript-js如何检测用户浏览器是否为放大或缩小状态?

归属感 发布于 2017-04-18 字数 196 浏览 1155 回复 4

如题!
例图:请输入图片描述
期望最佳答案是从浏览器入手,js有没有办法判断,如果实在没有可以考虑其他方法。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(4

泛泛之交 2017-08-11 4 楼

可以通过检测 ctrl+0 ,,, 这些特殊的按键
刚搜索啦一下 还真搜索到一个 跟我的想法一样的
http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/

泛泛之交 2017-07-28 3 楼

可以在页面上访一个div,然后通过监听这个div的宽带来判断浏览器是否被放大,如:

 <div id='asdfa'></div>
<INPUT TYPE="button" onclick="alert(document.getElementById('asdfa').offsetWidth)">

当浏览器被放大或缩小时,点击按钮得到的asdfa的offsetWidth是不一样的

灵芸 2017-06-16 2 楼

这个应用在QQ空间中看到过,可以在页面载入后自动判断浏览器是否处于放大缩小状态。
原理:通过flash检测swf自身的缩放比例,然后调用JavaScript的方法

js文件:http://cnc.qzonestyle.gtimg.cn/qzone/v6/accessory/accessory.js
swf文件:http://cnc.qzs.qq.com/qzone/v6/accessory/plugin/zoom.swf

JavaScript片段:

...
loadSWF:function(){//载入检测zoom的swf
var swf=QZONE.media.getFlashHtml({"src":"http://"+imgcacheDomain+"/qzone/v6/accessory/plugin/zoom.swf?onchange=QZONE.frontPageAccessory.zoomDetect.onZoomChange","width":"10","height":"10","allowScriptAccess":"always","id":"accessory_zoom","name":"zoom_detect","wmode":"transparent","scale":'noScale'});
var cnt=QZFL.dom.createElementIn("div",document.body,false,{id:'_qz_zoom_detect',style:'position: absolute; right: 0px; bottom: 0px; visibility: visible;'});
cnt.innerHTML=swf;
},
onZoomChange:function(o){//swf回调方法
var s=this.currentScale=o.scale,m=s>1?'放大':'缩小';
if(s!=1){
qfpa.zoomDetect.level=s;
var m="您的浏览器目前处于"+m+'状态,会导致空间显示不正常,您可以键盘按“ctrl+数字0”组合键恢复初始状态。',h='<div class="gb_hintbar"><div class="inner"><i class="ui_ico ui_hint_warn"></i><div class="hintbar_txt">'+m+'<a href="javascript:;" onclick="QZONE.frontPageAccessory.zoomDetect.closeDetect();return false;">不再提示</a></div></div><a title="点击退出" class="text_close" href="javascript:;" onclick="QZONE.FrontPage.hideTopTips();return false;">×</a></div>';
QZONE.FrontPage.showTopTips(h,60);
TCISD&&TCISD.pv("home.qzone.qq.com","zoommode");
}else{
if(s!=qfpa.zoomDetect.level){
QZONE.FrontPage.hideTopTips();
}
}
},
...

ActionScript片段:

...
private function enterFrameHandler(_arg1:Event):void{
if (this.getZoomLevel() != this._savedZoomLevel){
this._savedZoomLevel = this.getZoomLevel();
//调用JS的onZoomChange方法
this._jsCalls.addJSCall(this._changefunc, {
scale:this.getZoomLevel(),
init:this._initCall
});
this._initCall = false;
};
}
public function getZoomLevel():Number{
return ((this.stage.stageHeight / this._setHeight));
}
...

夜无邪 2017-06-13 1 楼

通过元素的相对位置和绝对位置就可以判断出是不是处于放大状态了。

比如一个按钮设置的宽度为相对宽度,当浏览器被放大时,相对宽度的按钮的宽度肯定放大了,在那一个绝对位置的为参考,这样就知道是放大还是缩小了