精华内容
下载资源
问答
  • 浏览器固定缩放比例

    千次阅读 2020-03-16 15:06:38
    1、看了好多博客,都是以下面代码为准 ... // 判断pc浏览器是否缩放,若返回100则为默认缩放,如果大于100则是放大,否则缩小 function detectZoom (){ var ratio = 0, screen = window.screen, ...

    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);
    }

     

    展开全文
  • JS 获取浏览器显示比例,缩放比例

    千次阅读 2019-09-29 16:33:52
    JS不能调整浏览器的显示比例,仅能查看 //调整浏览器显示比例【仅能查看】 function ChangeRatio() { var ratio=0; var screen=window.screen; var ua=navigator.userAgent.toLowerCase(); if(window...

    JS不能调整浏览器的显示比例,仅能查看

    //调整浏览器显示比例【仅能查看】
    function ChangeRatio()
    {
        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;
    }

     

    转载于:https://www.cnblogs.com/dyhao/p/11458882.html

    展开全文
  • 火狐设置默认缩放比例If you browse with Mozilla Firefox, you can now set a default zoom level for all websites. And you can still set custom zoom levels for individual websites, too. This feature was ...
    火狐设置默认缩放比例

    火狐设置默认缩放比例

    The Mozilla Firefox Logo.

    If you browse with Mozilla Firefox, you can now set a default zoom level for all websites. And you can still set custom zoom levels for individual websites, too. This feature was added in Firefox 73, which was released Feb. 11, 2020.

    如果使用Mozilla Firefox浏览,现在可以为所有网站设置默认缩放级别。 而且,您仍然可以为各个网站设置自定义缩放级别。 2020年2月11日发布的Firefox 73中添加了此功能。

    如何为所有网站设置默认缩放级别 (How to Set a Default Zoom Level for All Websites)

    It’s easy to tell Firefox to zoom in or out automatically on all websites you visit. To get started, click the menu button in the top-right corner of the Firefox window, and then select “Options” (on a Mac, select “Preferences”).

    告诉Firefox在您访问的所有网站上自动放大或缩小很容易。 要开始使用,请单击Firefox窗口右上角的菜单按钮,然后选择“选项”(在Mac上,选择“首选项”)。

    Click "Options."

    Scroll down to the “Language and Appearance” section on the General pane. Click the “Default Zoom” box in the “Zoom” section and select the zoom level you want. You can choose a zoom level between 30 and 300 percent.

    向下滚动到“常规”窗格上的“语言和外观”部分。 单击“缩放”部分中的“默认缩放”框,然后选择所需的缩放级别。 您可以在30%到300%之间选择缩放比例。

    If you like, you can also check the “Zoom Text Only” option. This will enlarge or shrink the text on a web page, but it won’t zoom the other content, like images.

    如果您愿意,还可以选中“仅缩放文本”选项。 这将放大或缩小网页上的文本,但不会缩放其他内容,例如图像。

    Firefox's default zoom option.

    If you don’t see the “Default Zoom” option, you’ll need to update Firefox. Click Menu > Help > About Firefox to check for updates.

    如果看不到“默认缩放”选项,则需要更新Firefox。 单击菜单>帮助>关于Firefox以检查更新。

    如何为一个网站设置缩放级别 (How to Set a Zoom Level for One Website)

    To quickly set a different zoom level for a particular website, click the menu button at the top right, and then click the plus (+) or minus sign (-) to zoom in or out, respectively. You can see the current zoom level in the address bar.

    要为特定网站快速设置不同的缩放级别,请单击右上角的菜单按钮,然后单击加号(+)或减号(-)分别进行放大或缩小。 您可以在地址栏中看到当前的缩放级别。

    Firefox will remember the zoom level you set for each website.

    Firefox会记住您为每个网站设置的缩放级别。

    The Firefox option for per-website zoom.

    If you want to change the size of text only, click “View” in the menu bar, hover your mouse over “Zoom,” and then click “Zoom Text Only.”

    如果只想更改文本大小,请在菜单栏中单击“查看”,将鼠标悬停在“缩放”上,然后单击“仅缩放文本”。

    There are also some handy shortcuts you can use to quickly zoom in or out. Press Ctrl on Windows or Cmd on Mac while performing any of the following:

    您还可以使用一些便捷的快捷方式来快速放大或缩小。 在执行以下任一操作时,请在Windows上按Ctrl,在Mac上按Cmd:

    • Scroll in or out with your mouse to zoom in or out.

      用鼠标放大或缩小。
    • Press the plus sign (+) to zoom in or the minus sign (-) to zoom out.

      按加号(+)放大或按减号(-)缩小。
    • Press zero to restore the zoom level to 100 percent.

      按零将缩放级别恢复到100%。

    These features, new and old, can help you reduce eye strain and make reading much easier on the web.

    这些新的和旧的功能可以帮助您减少眼睛疲劳 ,并使网上阅读更加轻松。

    翻译自: https://www.howtogeek.com/657255/how-to-set-a-default-zoom-level-in-firefox/

    火狐设置默认缩放比例

    展开全文
  • JS设置浏览器缩放比例

    千次阅读 2020-08-27 09:31:28
    JS设置浏览器缩放比例 因为 windows10 的操作系统,尽管是19201080的分辨率,但是发现我的页面显示是正常的,但是我同学打开说滚动条特别多,然后就特别的丑陋,尤其是出现了横向的滚动条,这个就很难让人接受,但是...

    JS设置浏览器缩放比例

    因为 windows10 的操作系统,尽管是19201080的分辨率,但是发现我的页面显示是正常的,但是我同学打开说滚动条特别多,然后就特别的丑陋,尤其是出现了横向的滚动条,这个就很难让人接受,但是我这边就显示正常,核对了一下,我们用的都是19201080的分辨率,理论上是不会出现这种问题的,于是想到了可能是由于windows 操作系统缩放的问题,windows 操作系统尽管是 1920*1080,但是默认他会推荐你使用125%的缩放比例,也就是说操作系统的所有页面都被放大了,所以说有些布局处理不好可能会出现问题。
    在这里插入图片描述
    想了个办法,仅仅是一个办法哈,理论上是需要适配的,但是没那么多时间去处理那么多事情,关键是不会,想的办法是无论系统给缩放多大的比例,我都给他尽可能的缩回去。

    参考这个文章:https://www.zhihu.com/question/337698525/answer/767943139
    其实他的意思就是进入页面就去检测这个页面有没有被缩放,缩放的比例是多少,125%还是150%,如果是缩放,我们根据现在的展示比例缩放当前页面到100%的感觉,我设置的是125%的时候就缩放现页面的85%,如果是150%的时候就缩放现页面的65%,具体得算,我不会算,我就直接写死了。

    var t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    if(t != 1){   // 如果进行了缩放,也就是不是1
       document.body.style.zoom = -0.6 * t + 1.55;   // 就去修改页面的缩放比例,这个公式我自己算的,不准确,勉强。
    }
    

    这样不论设置windows系统是125%的缩放比例还是150%的缩放比例,都可以尽可能的在初始化页面的时候恢复到100%的感觉,但是可能会有些问题,但是确实可以实现。

    优化

    var t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    document.body.style.zoom =1/ t;   // 就去修改页面的缩放比例
    
    展开全文
  • js缩放网页比例

    万次阅读 2018-06-22 16:06:30
    将当前网页缩放比变为200%document.getElementsByTagName('body')[0].style.zoom=2原文链接:https://segmentfault.com/q/1010000007208897
  • 实现类似浏览器缩放页面比例

    千次阅读 2017-04-01 14:47:33
    用浮点数来定义缩放比例。不允许负值 : 用百分比来定义缩放比例。不允许负值 例子: body{ zoom: 70%;  } transform : none| transform-functions 值: none 定义不...
  • 三种方案基本无区别,第三是最新的,如果前两种解决不了,用第三种。 一,经典版本 html, body, div, span,applet, ...tbody, tfoot, thead, tr,th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, sma...
  • 查看浏览器缩放比例,不是 100% 则给出提示 let rate = ChangeRatio(); console.log("sr" + rate); if(rate != 100){ alert('当前页面不是100%显示,请按键盘ctrl+0恢复100%显示标准,以防页面显示错乱!'); } ...
  • 火狐浏览器设置默认缩放比例

    千次阅读 2019-08-11 18:40:20
    1.地址栏输入“about:config”回车并确认风险打开配置页面 2.搜索“layout.css.devPixelsPerPx” 2.将值更改为你需要的即可,一般1.25比较合适
  • 可能大家发现自己制作的手机端页面,默认打开的时候并不是在理想的缩放状态下。 遇到这样的问题,需要在head标签下,添加meta解决。 代码如下: ? 1 2 3 4 5 6 7 8 9 ...
  • 但是客户用的是台式机,客户的系统和浏览器缩放比例都是100%,这个页面在100%会很丑,而且这个页面是为了全屏设计的,客户想不全屏的时候也能展示全所有信息。因此想尽可能少的改造代码就想到了zoom缩放。 zoom...
  • 禁用浏览器缩放功能(js)

    千次阅读 2019-12-23 14:55:36
    一、移动端禁止缩放 移动端在禁止缩放上比较简单,添加meta标签即可 <meta name="viewport" content=" width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-...
  • 然后又因为csdn这个网页布局的右边在默认缩放比例情况下会显示一个专栏窗口,挤压了正文部分放图片的空间,就导致了这个图片模糊的问题。 请pc端的朋友在阅览博客时,把浏览器的缩放比例调整到110% ,即可解决这个...
  • 禁止浏览器缩放

    2019-10-11 15:07:35
    移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦...由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况,只能通过js来控制了 Re...
  • 首先说明,这里所说的浏览器状态是指用户点击浏览器左上角的放大...detectZoom 函数的返回值如果是 100 就是默认缩放级别,大于 100 则是放大了,小于 100 则是缩小了。 1 function detectZoom (){ 2 var rati...
  • 这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)。 检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放。这里提供javascript的方法来...
  • 1:浏览器内部的缩放是指网页在浏览器内部的显示比例。在chrome里面 通过Ctrl+/-来调节。 举个例子:比如桌面的分辨率是1920*1080,浏览器窗口大小没有改变,你的网页的显示默认是100%情况下。 如果减...
  • PC端js禁止浏览器缩放

    千次阅读 2019-08-14 17:12:59
    1.网上的资料大多都是按照windows的devicePixelRatio来判断是否缩放的,这个判断不是很准确,因为在mac下,默认的devicePixelRatio是为2的,所以需要根据不同的操作系统来判断缩放比例。 devicePixelRatio详细介绍...
  • 如何更改Chrome的默认缩放设置

    千次阅读 2020-09-19 14:58:19
    Press Ctrl on Windows and Cmd on Mac while performing any of the following: 您也可以使用这些方便的键盘快捷键来快速设置网站的默认缩放比例。 在执行以下任一操作时,在Windows上按Ctrl,在Mac上按Cmd: ...
  • 1.以下代码就能实现zoom的计算通过实际浏览器大小与默认屏幕大小的比例获取 //高度计算zoom varpercentage,appHeight=768;//设置默认屏幕大小 percentage=window.innerHeight*100/appHeight; percentage=Math....
  • // 判断pc浏览器是否缩放,若返回100则为默认缩放,如果大于100则是放大,否则缩小 function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window....
  • 配置webview缩放参数值: //设置true,才能让Webivew支持<meta>标签的viewport属性 webSettings.setUseWideViewPort(true); //设置可以支持缩放 webSettings.setSupportZoom(true); //设置出现缩放工具 ...
  • 前言: 完成课程设计的同时,顺便溜了一波JQ,,,虽然后面老师说根绝VUE以及AJ等趋势,Jq很快就会成为过去,但是基础性的学习永远都是基础,,, 一、JQuery学习   1.jQuery选择器: ... $...
  • 火狐(Firefox)浏览器默认的显示网页蠢大蠢大的,比IE、360浏览器所显示的偏大,内容约是120%, 但火狐浏览器的配置项是“100%”。 对此,需要修改浏览器的默认缩放比来使显示正常 1.打开浏览器 2.在网址输入...
  • ie 默认edgeThe latest version of the MicrosoftEdge browser is based on Google’s Chromium software, and the two share many features including the ability to set default zoom levels for one site or ...
  • chrome缩放比例问题,默认缩放比例100%,实际110%附近 chrome版本:93.0.4577.63(正式版本) 同一个界面,我的浏览器文本显示不对称 同事的92版本的chrome显示正常,自己的firefox浏览器文本也显示正常 按照搜索的...
  • 1、一个页面有多个图表的时候,分别使用window.onresize的时候只有一个图表可以自适应浏览器窗口宽度 解决: 在每个图表的setOption后面加上如下代码 window.addEventListener('resize', function () { myChart_...
  • 公司一个项目,在启动web页面时,默认应该是打开项目页面,然后浏览器启动时总是打开一个广告页面,经理让写一个脚本,让电脑每次开机自启浏览器,且加载项目页面。浏览器自启和打开项目页面轻松搞定,这时问题来了...
  • 这个只适用于ie,其他浏览器好像默认禁用这种行为吧,求兼容 ``` <!DOCTYPE html> <title>window <script src="js/jquery-1.11.3.min.js"></script> * {padding: 0; margin: 0;} ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,257
精华内容 8,502
关键字:

浏览器默认缩放比例