精华内容
下载资源
问答
  • js获取浏览器缩放比例

    千次阅读 2019-10-05 04:42:52
    前几天在做项目的时候遇到浏览器缩放比例不为100%时,出来的页面不正常,于是找到了方法获取其比例来通知用户 function detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent...

    前几天在做项目的时候遇到浏览器缩放比例不为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')) {  
        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;
    };

    推荐地址:http://www.jb51.net/article/55753.htm

    转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/9057387.html

    展开全文
  • 前段时间由于工作需要,需要实现禁止使用Ctrl/Command + -/+, 以及Ctrl/Command + 鼠标滚动等方式缩放浏览器: 1 $(document).keydown(function (event) { 2 //event.metaKey mac的command键 3 //mac下...

     

    前段时间由于工作需要,需要实现禁止使用Ctrl/Command + -/+, 以及Ctrl/Command + 鼠标滚动等方式缩放浏览器:

     1         $(document).keydown(function (event) {
     2           //event.metaKey mac的command键 
     3           //mac下chrome: - 189, + 187 firefox: - 173, + 61, 
     4           //数字键盘: + 107, - 109
     5           if ((event.ctrlKey === true || event.metaKey === true)&& 
     6           (event.which === 189 || event.which === 187 
     7           || event.which === 173 || event.which === 61 
     8           || event.which === 107  || event.which === 109))
     9           {
    10             event.preventDefault();
    11           }
    12         });
    13         $(window).bind('mousewheel DOMMouseScroll', function (event) {
    14           if (event.ctrlKey === true || event.metaKey) {
    15              event.preventDefault();
    16           }
    17         });

    然而最近升级了chrome浏览器到73,再运行项目的时候突然报错:

    查看了相关说明,发现chrome73为了减少用户触摸屏幕后更新显示所需的时间,将在文档级目标(窗口)上注册的wheel/mousewheel事件侦听器默认为passive(即:{passive: true})。而这样的设置将忽略此类侦听器内部的preventDefault()调用,从而使chrome下的禁止功能失效。目前先根据官方说明做了修改:

    window.addEventListener('mousewheel', function(event){
        if (event.ctrlKey === true || event.metaKey) {
              event.preventDefault();
        }
    },{ passive: false});
    
    //firefox
     window.addEventListener('DOMMouseScroll', function(event){
        if (event.ctrlKey === true || event.metaKey) {
               event.preventDefault();
        }
    },{ passive: false});

    虽然目前firefox的相关更改还在考虑中,但为了防止出现相同问题,还是为ff下的事件显示设置了{passive: true}。

    暂时解决了问题,记录一下待日后优化。

    相关说明:

    https://www.chromestatus.com/features/6662647093133312

    https://developers.google.com/web/updates/2017/01/scrolling-intervention

    https://github.com/WICG/interventions/issues/64

    转载于:https://www.cnblogs.com/xiaobaiou/p/10731062.html

    展开全文
  • js控制浏览器放大或者缩小

    千次阅读 2020-07-07 15:35:02
    希望改变当前页面所在的浏览器窗口的大小 解决方案: 使用window对象的方法:resizeTo()和resizeBy()。比如: window.resizeTo(800, 600); // 将窗口大小调整为宽800,高600,单位为像素 window.resizeBy(50, 50); //...

    问题一:
    希望改变当前页面所在的浏览器窗口的大小
    解决方案:
    使用window对象的方法:resizeTo()和resizeBy()。比如:
    window.resizeTo(800, 600); // 将窗口大小调整为宽800,高600,单位为像素
    window.resizeBy(50, 50); // 调整窗口大小,在当前基础上,宽和高各增加50
    window.resizeBy(50, 0); // 调整窗口大小,在当前基础上,只将宽增加50
    window.resizeBy(-50, -50); // 调整窗口大小,在当前基础上,宽和高各减少50
    问题二:
    上面提到了,resizeTo()和resizeBy()方法不能改变窗口左上角的位置,但有时的确有这种需求,比如最大化窗口。
    解决方案:
    使用moveTo()方法将浏览器窗口移动到屏幕的指定坐标位置:
    moveTo(100, 100); // 将左上角移至(100, 100)点
    使用moveBy()方法将浏览器窗口在当前位置基础上移动一个相对偏移量:
    moveBy(50, 50); // 将窗口向右和向下各移动50个像素
    两个函数的定义为:
    window.moveTo(x, y); // x, y 为新位置的两个坐标值
    window.moveBy(dx, dy); // dx, dy 是相对偏移的值
    现在能够改变窗口的大小,也能改变窗口的位置了,如果两者结合起来就能做更多事情,比如最大化窗口。看下面这个函数:
    function maximizeWindow()
    {
    var offset = (navigator.userAgent.indexOf(“Mac”) != -1 || navigator.userAgent.indexOf(“Gecko”) != -1 ||
    navigator.appName.indexOf(“Netscape”) != -1) ? 0 : 4;
    window.moveTo(-offset, -offset);
    window.resizeTo(screen.availWidth + (2 * offset), screen.availHeight + (2 * offset));
    }
    该函数能让窗口占据整个屏幕,看起来确实是最大化了,事实却不是这样,不信请查看窗口的最大化按钮。脚本首先为Windows设置了一个额外的偏移量4 (原因看后面),然后再调整窗口的位置和大小,模拟一种最大化的效果。其中screen对象的availWidth和availHeight属性分别表示屏幕的可用宽度和高度(单位为像素),注意它们不包括任务栏的尺寸。
    最大化和最小化的概念主要出现在Windows操作系统中,与Macintosh中的窗口就不一样(下次去电脑城,得仔细体验一下有何不同)。也许我们能够模拟一个最大化窗口,但对于不同的浏览器总有些局限性。首先,在Windows中一个真正最大化的窗口左上角的坐标是(-4, -4)而不是(0, 0),这样能将4像素宽的窗口边沿隐藏掉,这也是上面脚本中出现4的原因,而Macintosh则允许窗口细长的边沿总是可见;另外还与浏览器有关系,比如FireFox根本就不允许将窗口移至(-4, -4)这个点。
    仅仅通过脚本不能使窗口真正地最大化或最小化。但试试下面这段脚本(只在IE下有效),也许会给你一点惊喜:)

    出自 http://tech.sina.com.cn/s/2008-06-27/0941710872.shtml

    欢迎进qq群交流:704028989

    展开全文
  • 此时考虑变动时重新赋予宽度,但非当前页面缩放再跳回时会出现获取宽度值错误导致文字丢失,所以记录了初始宽度值,并根据获取当前缩放比进行计算,以下是获取页面缩放率的函数 function getWindowRatio(){ var ratio=0...

    在某需求中想要实现,当窗口变动时实时改变元素宽度以使其美观.
    由于外层框架是底层代码生成的,且会在变动时刷新,故百分比布局并不完全适用.
    此时考虑变动时重新赋予宽度,但非当前页面缩放再跳回时会出现获取宽度值错误导致文字丢失,所以记录了初始宽度值,并根据获取当前缩放比进行计算,以下是获取页面缩放率的函数

    function getWindowRatio(){
        var ratio=0;
        var screen=window.screen;
        var ua=navigator.userAgent.toLowerCase();
    
        if(window.devicePixelRatio !== undefined){
            ratio=window.devicePixelRatio;
        } else if(~ua.indexOf('msie')){
            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;
    }
    

    注1:该方法按理来说在另一页面直接改变浏览器窗口大小再改变缩放率后跳回目标页面时,宽度应该是不对的,但本人的页面中并没有发生这个问题,考虑是$(window).resize本身或本人前端框架的问题,未进行验证,暂留

    注2:理论上缩放前后的px值是成缩放比的,但在获取元素宽度时会发现有一定误差,目前认为是元素块的边框等宽度时单独计算的,导致实际缩放计算的不准确,另外固定写入的宽度,如某块宽为10px在缩放前后仍是10px,缩放实际改变的是浏览器窗口的容纳像素值,例如初始时窗口内最大宽度为1024px.在放大至2倍时,实际是同样的窗口只能显示其中的512px像素,即原来100%宽度代表1024像素,放大后仅代表512像素,但固定的像素值是不会改变的

    展开全文
  • params.checkData" :tableTitle="tableTitle" > :engine_params="print_params.checkData" :tableTitle="tableTitle" > 关闭 打印 topEightTablePrint组件的style代码我添加了缩放比例设置: @media print { ...
  • 项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo...
  • 不幸的是,每个浏览器都有自己的视口元标记实现。不同的组合将在不同的浏览器上工作。Android 2.2:似乎根本不...要允许浏览器缩放内容,您需要设置user-scalable = yes,然后要禁用缩放,可以将最小和最大缩放比...
  • 公司一个项目,在启动web页面时,默认应该是打开... 因为开发在手头工作量太大了,在浏览器适配方面就没有做好(开发是大哥,项目经理上了都不顶用),于是我们的项目只有在浏览器缩放到90%情况下,页面内容才能优...
  • pc端web页面开发时,发现windows系统经常推荐用户使用125%、150%比例的缩放窗口,这样导致web页面被进行缩放,除此之外还有人为的按钮缩放。故此,在页面devicePixelRatio(设备像素比例)变化后,通过计算页面body...
  • js实现全屏和缩放

    2018-04-25 12:57:00
    * @description 简单的浏览器检查结果。 * `webkit` * webkit版本号,如果浏览器为非webkit内核,此属性为`undefined`。 * `chrome` * chrome浏览器版本号,如果浏览器为chrome,此属性为`undefined`。 * `ie` *...
  • /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //...
  • 下面我简介一下如何用css3来实现浏览器里的缩放功能。HTML页面我们先写一个简单的页面,以测试页面缩放的代码。页面上有两个按钮,一个放大,点击后放大页面,一个缩小,点击后缩小页面。Javascript代码利用transfo....
  • jQuery如何实现响应浏览器缩放大小

    千次阅读 2014-10-31 09:54:43
    /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){  $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $...
  • 由于样式一开始是在浏览器缩小80%的状态下写的,现在改麻烦而且来不及 用zoom可以实现缩小但是会留白 请问如何像chrome一样在缩小的同时充满浏览器界面,谢谢!![图片说明]...
  • js实现浏览器打印PDF

    2020-10-21 21:52:09
    光速云插件 ...支持谷歌、火狐、IE7+等浏览器。 支持HTTPS协议的站点。 跨平台,支持Windows、Linux、Mac、Android系统 安装 Windows版下载地址 当前版本5.0.5 Linux版下载地址 当前版本1.0.1 Android版
  • 当然,视频流上叠加信息可以通过canvas来完成(透明canvas实现),但是在测试的过程中发现,当浏览器缩放时,叠加的图层信息与初始化的时候会产生错位及偏移,这主要是由于,默认情况下,视频流显示大小会随着浏览器...
  • 下面我简介一下如何用css3来实现浏览器里的缩放功能。 HTML页面 我们先写一个简单的页面,以测试页面缩放的代码。 <!--[endif]--> 页面上有两个按钮,一个放大,点击后放...
  • github 仓库 : GitHub - mozilla/pdf.js: PDF Reader in JavaScript pdf.js 使得PDF文件可以在html页面中进行打开阅读, 自带的预览页面 viewer.html 包含了丰富的功能。预览效果如下图所示: 页面自带有放大...
  • 新建个名为watermark 的 js 文件 把下面的代码复制进去 let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document...
  • js调用pc摄像头实现拍照、录视频等,新版Chrome无访问http页面无法打开麦克风、摄像头新版Chrome配置vue环境下的前端function部分 ##由于没有https环境,只有http环境,各种测试后,找到的很实用的方法 新版Chrome...
  • 一开始用了自带的webbrowser,不支持H5,脚本会有问题,后来又用了webkitBrowser,发现有些js效果还是显示不出来,和webbrowser稍微好一点,但是还是不行,然后决定用CefSharp,用了之后效果完美。 源码地址:...
  • 2、浏览器大小自适应 定义用字符串拼接起来的变量名的变量 //有多个图表时,需要给每个图表定义一个单独的名字,以便于接下来每个图表自适应调用 var name = 'pieChart_' + index; //生成函数名,index为变量 ...
  •  keyboardDisplayRequiresUserAction:设置为yes或no当表单元素通过JavaScript focus() 调用(默认为yes)接收焦点打开键盘。  suppressesIncrementalRendering:设置为yes或no等到所有新视图的内容被渲染...
  • var render = function(){ //每秒渲染60次 requestAnimationFrame(render); //实现渲染方法render()的周期性调用 renderer.render(scene, camera); } render();
  • script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> /*调用微信预览图片的方法*/ funcReadImgInfo() { let imgs = []; //获取图文中全部的im...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,351
精华内容 9,340
关键字:

js调用浏览器缩放