• js获取页面缩放比例

    2020-01-07 10:01:58
    //获取当前页面缩放值 function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefi...
        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;


  • <meta name="viewport" content="width=device-width,user-scalable=...width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maximum-scale ...

    <meta name="viewport" content="width=device-width,user-scalable=no"/>

    width - viewport的宽度

    height - viewport的高度

    initial-scale - 初始的缩放比例

    minimum-scale - 允许用户缩放到的最小比例

    maximum-scale - 允许用户缩放到的最大比例

    user-scalable - 用户是否可以手动缩放

    如果不想让页面缩放,可以直接 user-scalable = no





  • 这样的话,每次点击目录就要重新进行缩放,非常不方便,这里给大家介绍如何禁止福昕阅读器改变缩放PDF页面缩放比例的方法。 1、点击福昕阅读器左上角“文件”标签,然后点击“偏好设置”; 2、在弹出对话框的左侧...



  • chrome 固定缩放比例Everything can be going along nicely until a program gets a new update that suddenly turns everything into a visual mess, like scaling up the UI, for example. Is there a simple ...
    chrome 固定缩放比例

    chrome 固定缩放比例


    Everything can be going along nicely until a program gets a new update that suddenly turns everything into a visual mess, like scaling up the UI, for example. Is there a simple solution? Today’s SuperUser Q&A post has some helpful solutions for a reader’s frustrating browser UI problem.

    一切都可以顺利进行,直到程序获得新的更新,突然将所有内容变成视觉混乱,例如放大UI。 有没有简单的解决方案? 今天的SuperUser Q&A帖子提供了一些有用的解决方案,以解决读者令人沮丧的浏览器UI问题。

    Today’s Question & Answer session comes to us courtesy of SuperUser—a subdivision of Stack Exchange, a community-driven grouping of Q&A web sites.

    今天的“问答”环节由SuperUser提供,它是Stack Exchange的一个分支,该社区是由社区驱动的Q&A网站分组。

    问题 (The Question)

    SuperUser reader PGmath wants to know how to adjust Google Chrome’s UI scaling:

    超级用户阅读器PGmath想知道如何调整Google Chrome的UI缩放比例:

    For some reason, when I opened Google Chrome this morning, I noticed that the entire UI had been scaled up slightly. Everything (buttons, text, webpages, etc.) is about ten percent larger than it used to be. This is really annoying since less of everything fits on my screen now (in particular, my bookmarks bar does not display as many bookmarks).

    由于某种原因,当我今天早上打开Goog​​le Chrome时,我注意到整个用户界面已经稍微扩大了。 一切(按钮,文本,网页等)都比以前大百分之十。 这真的很烦人,因为现在所有内容都无法显示在我的屏幕上(特别是我的书签栏显示的书签不多)。

    I have been unable to find any kind of UI/DPI scaling options in Google Chrome’s settings. How can I change it back to the way it was before?

    我在Google Chrome浏览器的设置中找不到任何类型的UI / DPI缩放选项。 如何将其更改回以前的状态?



    1. This is not a problem in Windows DPI scaling settings since this did not happen with any other programs on my system.

      这在Windows DPI缩放设置中不是问题,因为我的系统上的任何其他程序都没有发生。
    2. I know how to zoom in and out of webpages, but that is definitely not the problem since the entire UI is now scaled up (not just webpages).


    How do you adjust Google Chrome’s UI scaling?

    您如何调整Google Chrome浏览器的用户界面缩放比例?

    答案 (The Answer)

    SuperUser contributor DrZoo has the answer for us:


    With the latest Google Chrome update (version 54), they made it so that it can detect the DPI settings on your computer and scale the web browser accordingly. Previously, Google Chrome did not pay attention to your system’s DPI settings, but now it does, and that is the root cause of the large interface issue. If you have the DPI scaling set to 125 percent or greater on your Windows computer, then Google Chrome will scale differently depending on the setting.

    他们采用了最新的Google Chrome更新(版本54),使其能够检测到您计算机上的DPI设置并相应地缩放了网络浏览器。 以前,谷歌浏览器不关注系统的DPI设置,但现在已经关注了,这是大界面问题的根本原因。 如果您在Windows计算机上将DPI缩放比例设置为125%或更高,则Google Chrome浏览器将根据设置进行不同缩放。

    Option #1


    Have Windows specifically tell Google Chrome to ignore DPI scaling by right-clicking on Google Chrome’s icon, then going to Properties > Compatibility, select (check) “Disable display scaling on high DPI settings”, then click OK.

    通过右键单击Google Chrome的图标,然后转到“属性”>“兼容性”,选择(选中)“在高DPI设置上禁用显示缩放”,让Windows具体告诉Google Chrome忽略DPI缩放。


    Option #2 (Seems To Be The Most Successful)


    The “obvious” fix is to just set your computer’s DPI scaling back to 100 percent. That will make Google Chrome appear the same as it used to, but everything else will be smaller, so it is not a very good fix. Just type “DPI” into the Windows search bar and open the top result, “Make text and other items appear larger or smaller” (that is how it is shown on Windows 7, but may be worded differently on other editions).

    “显而易见”的解决方法是将计算机的DPI缩放比例设置回100%。 这将使Google Chrome浏览器看起来像以前一样,但其他所有内容都会变小,因此并不是一个很好的解决方案。 只需在Windows搜索栏中键入“ DPI”并打开最上面的结果,“使文本和其他项目显示更大或更小”(这就是Windows 7上的显示方式,但其他版本上的措辞可能不同)。

    Option #3


    Right-click on Google Chrome’s shortcut or Start Menu icon and select Properties > Shortcut Tab, then enter the following code at the end of the text in the Target field:

    右键单击Google Chrome浏览器的快捷方式或“开始”菜单图标,然后选择“属性”>“快捷方式选项卡”,然后在“目标”字段的文本末尾输入以下代码:

    • /high-dpi-support=1 /force-device-scale-factor=1

      / high-dpi-support = 1 / force-device-scale-factor = 1

    Make sure that there is a blank space between the “.exe” part and the first forward slash. Click OK and then restart Google Chrome. If the scaling is not back to normal, make sure to launch Google Chrome from the location specified above. If Google Chrome is pinned to your taskbar, do not forget to unpin and then re-pin it. This is not a permanent fix because other links to Google Chrome (like hyperlinks in PDFs) can trigger the larger UI scaling as well.

    确保在“ .exe”部分和第一个正斜杠之间没有空格。 点击确定,然后重新启动Google Chrome。 如果缩放比例未恢复正常,请确保从上面指定的位置启动Google Chrome。 如果将Chrome浏览器固定在您的任务栏上,请不要忘记取消固定然后重新固定它。 这不是永久性的修复,因为指向Google Chrome的其他链接(例如PDF中的超链接)也可以触发更大的UI缩放。

    Have something to add to the explanation? Sound off in the comments. Want to read more answers from other tech-savvy Stack Exchange users? Check out the full discussion thread here.

    有什么补充说明吗? 在评论中听起来不错。 是否想从其他精通Stack Exchange的用户那里获得更多答案? 在此处查看完整的讨论线程

    翻译自: https://www.howtogeek.com/278699/how-do-you-adjust-google-chromes-ui-scaling/

    chrome 固定缩放比例

  • 浏览器固定缩放比例

    2020-03-16 15:06:38
    1、看了好多博客,都是以下面代码为准 ... // 判断pc浏览器是否缩放,若返回100则为默认无缩放,如果大于100则是放大,否则缩小 function detectZoom (){ var ratio = 0, screen = window.screen, ...
  • 用js控制页面图片等比缩放 css图片等比缩放 比例缩放显示 js 页面 缩放图片 js缩放图片 图片按比例缩放页面上部head部分加cssimg {max-width: 670px;width:expression(this.width > 670 ? "670px" : (this.width+...
  • 然后在meta标签中添加“maximum-scale=1.0, user-scalable=0”两个属性即可禁止页面缩放。本文操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。css如何设置不允许页面缩放?css如何设置不允许页面缩放...
  • 设置火狐浏览器默认页面缩放比例
  • 搜索框组件(日期选择器,input ,搜索按钮)在100% 125% 150%这三个比例下,日期选择器的大小不变。(日期选择器用的element-ui的 el-data-picker,搜索框组件布局用的栅格) 思路来源 跳转链接 2. 组件样式 .input-...
  • 1.“CTRL++”可使页面放大,用“CTRL+-”可使页面缩小. 2.要改变默认分辨率,点击“附加组件”,下载“DefaultFull Zoom Level”,点击“首选项”更改
  • 获取浏览器页面缩放或展示比例

    千次阅读 2019-11-12 17:12:16
    就好奇 怎么获取到 页面是否缩放和 缩放比例的,所以就查询了一下:得到了 下面的结果 做个记录; 原文地址:https://www.cnblogs.com/dyhao/p/11458882.html var ratio=0; var screen=window.screen; ...
  • 1.当我们需要对一个页面进行等比例的缩小活着放大时,修改px显然不能达到我们的要求,那么我们可以这样做 transform-origin: 0px 0px;//在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。...
  • PC端页面比例缩放

    千次阅读 2017-07-05 17:02:00
    <meta name="viewport" content="width=1202"> //这行代码可以使PC端页面比例缩放,不至于变形 转载于:https://www.cnblogs.com/toward-the-sun/p/7122345.html
  • 显示页面比例缩放

    千次阅读 2016-08-26 09:09:51
    最近在工作中遇到一个页面放大问题?放大目标在iframe中,自己的实验贴出来,希望能帮到有这样需求的人。 不多说,直接上图,清楚明白。 (1)正常比例 (2)放大 (3)缩小 一、CSS3参考手册 语法: ...
  • pc页面比例缩放嵌入移动页面显示

    千次阅读 2017-02-14 16:11:32
    由于该html是从pc平台过来的,没有兼容移动平台,所以要把页面缩放到移动设备的页面里。 一开始使用了:http://blog.csdn.net/hu_shengyang/article/details/7381230 [html] view plain copy ...
  • 有一个手机上浏览的网页,我通过手势把页面放大了(没有写相关的手势控制代码,是手机浏览器自带的手势缩放功能),经过测试发现它实际是改变了浏览器的window.innerWidth/window.innerHeight这两个属性的数值,而...
  • html5 手机版页面缩放比例调整

    千次阅读 2016-08-04 18:18:00
    initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 转载于:...
  • 实现web页面比例缩放

    千次阅读 2015-07-21 11:38:00
    对于web的掌握限于可以看懂别人的代码,并在框架中作相应修改或增加。 今天把另一个项目中的网页源代码粘过来做一个页面,结果问题百出。 首先,同样的代码,放在自己的项目里,页面...结果手贱缩放了下,页面...
  • 实现类似浏览器的缩放页面比例

    千次阅读 2017-04-01 14:47:33
    用浮点数来定义缩放比例。不允许负值 : 用百分比来定义缩放比例。不允许负值 例子: body{ zoom: 70%;  } transform : none| transform-functions 值: none 定义不...
  • css 页面比例缩放样式

    千次阅读 2018-05-17 14:15:29
    效果是这样的:代码:document.getElementById("head_view").setAttribute('content','width=device-width, initial-scale=0.1, user-scalable=yes, minimal-ui');可以用 JS 判断来实现。
  • 禁止页面缩放

    万次阅读 2017-08-07 21:21:20
    这里讲解一下如何禁止页面缩放,其实也就是一句话的事情: , initial-scale=1.0, maximum-scale=1.0, user-scalable=no">在这个里面主要有这几个属性:width - viewport的宽度 height -
  • JS 获取浏览器显示比例,缩放比例 JS不能调整浏览器的显示比例,仅能查看 //获取当前页面的缩放值 function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); ...
  • 自定义Chrome缩放比例

    千次阅读 2014-07-09 19:13:00
    我想要设置Chrome页面缩放为120%,但是Chrome只提供110% 125%,根本没有让我舒心的缩放比例。 强迫症发作,谷歌了半天没有一个很好的解决方案。 虽然也有不少第三方扩展可以自定义缩放比例,但是扩展无法支持...
  • Spire.PDF是一个专业的PDF组件,能够独立地创建、编写、编辑、操作和阅读PDF文件,支持 .NET、Java...本文将详细介绍如何使用Spire.PDF设置PDF文档的页面显示样式及缩放比例。PDF页面显示设置//新建PDFDocument示例...
  • 网页缩放页面展示比例不变

    千次阅读 2020-06-24 14:30:18
    获取网页缩放值(网上找的) detectZoom () { let ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixel...



1 2 3 4 5 ... 20
收藏数 38,768
精华内容 15,507