精华内容
下载资源
问答
  • 纯js获取前端网页缩放比例方法 //获取当前页面的缩放值 function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== ...

    纯js获取前端网页缩放比例方法

     //获取当前页面的缩放值
        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;
        }
    
    
    展开全文
  • JavaScript实现网页图片等比例缩放 JS效果 JS效果特效 图片等比例缩放
  • 配置webview缩放参数值: //设置true,才能让Webivew支持<meta>标签的viewport属性 webSettings.setUseWideViewPort(true); //设置可以支持缩放 webSettings.setSupportZoom(true); //设置出现缩放工具 ...

    配置webview缩放参数值:

    //设置true,才能让Webivew支持<meta>标签的viewport属性
    webSettings.setUseWideViewPort(true);
    //设置可以支持缩放
    webSettings.setSupportZoom(true); 
    //设置出现缩放工具
    webSettings.setBuiltInZoomControls(true);
    //设定缩放控件隐藏
    webSettings.setDisplayZoomControls(false);
    
    //最小缩放等级
    setInitialScale(25);

    对于setInitialScale属性详解:

    setInitialScale(100);  代表不缩放。

    什么是不缩放?

    比如你要加载的网页中有图片的宽度是 500px ,如果你的手机分辨率(屏幕宽度) 是1000的话,那么整个图片只占一半的屏幕。 其他的字体都是按照标准展示。

    缩放级别

    • 如果这个时候如果你设置 setInitialScale(200) ,代表放大一倍,整个网页都会放大一倍,这个时候图片正好展示整个屏幕宽度,另外网页的字体也会放大一倍;

    • 如果这个时候如果你设置setInitialScale(50) ,代表缩小一倍,这个时候图片正好展示只占屏幕的四分之一,另外网页的字体也会同时变小.

    上面的设置仅限于打开的网页支持缩放功能,支不支持缩放功能取决于html的设置。

    若html中设置了以下属性:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"  name="viewport"/>

    该网页在WebView中显示的时候即是不支持缩放的。

    示例:

    /**
         * 初始化webview
         */
        private void initWebView() {
            // 获取webSettings
            WebSettings settings = mWebView.getSettings();
            // 支持js
            settings.setJavaScriptEnabled(true);
            // 设置编码
            settings.setDefaultTextEncodingName("utf-8");
            // 不使用缓存
            // settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
            // 在LOAD_CACHE_ELSE_NETWORK模式下,无论是否有网络,只要本地有缓存,
            // 都使用缓存。本地没有缓存时才从网络上获取。
            settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
            // 配置缓存,否则百度地图不显示
            // 设置启用或禁止访问文件数据
            settings.setAllowFileAccess(true);
            // 最重要的方法,一定要设置,这就是出不来的主要原因
            settings.setDomStorageEnabled(true);
            // 启用数据库
            // settings.setDatabaseEnabled(true);
            // String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
            // 启用地理定位
            // settings.setGeolocationEnabled(true);
            // 设置定位的数据库路径
            // settings.setGeolocationDatabasePath(dir);
            // 设置可以支持缩放
            settings.setSupportZoom(true);
            // 设置出现缩放工具
            //settings.setBuiltInZoomControls(true);
            // 最小缩放等级
            mWebView.setInitialScale(100);
            // 设置本地调用对象及其接口
            mWebView.addJavascriptInterface(new JsBridage(mAndroidJsImpl, this), "android");
            // 覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
            mWebView.setWebViewClient(new WebViewClient() {
    
                @SuppressWarnings("deprecation")
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    //返回值是true的时候控制去WebView打开,为false调用系统浏览器或第三方浏览器
                    //对拦截的url进行处理,shouldOverrideUrlLoading,拦截url加载,除资源请求的url
                    //shouldInterceptRequest(拦截所有url请求),此处采用加载拦截
                    mUrlResolve.resolveUrl(url);
                    //android与js交互时使用
                    //view.loadUrl(url);
                    return true;
                }
    
                @RequiresApi(Build.VERSION_CODES.N)
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                    String url = request.getUrl().toString();
                    //对拦截的url进行处理
                    mUrlResolve.resolveUrl(url);
                    //android与js交互时使用
                    //view.loadUrl(url);
                    return true;
                }
    
                @Override
                public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
                    //拦截所有请求,用document.referrer,这个属性是指从什么页面来到当前页面的。
                    //javascript:history.back(-1); 改为 location.href=document.referrer;
                    //如果A.jsp跳到B.jsp,那么这个值应该是url/A.jsp。点击锚点之后这个属性也不会变。
                    String url = request.getUrl().toString();
                    return super.shouldInterceptRequest(view, request);
                }
    
            });
    
        }

    完!!!

    展开全文
  • js缩放网页比例

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

    将当前网页缩放比变为200%

    document.getElementsByTagName('body')[0].style.zoom=2
    原文链接: https://segmentfault.com/q/1010000007208897
    展开全文
  • 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 固定缩放比例

    how-do-you-adjust-google-chromes-ui-scaling-00

    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缩放选项。 如何将其更改回以前的状态?

    Notes

    笔记

    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).

      我知道如何放大和缩小网页,但这绝对不是问题,因为现在整个UI都已放大(不仅仅是网页)。

    How do you adjust Google Chrome’s UI scaling?

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

    答案 (The Answer)

    SuperUser contributor DrZoo has the answer for us:

    超级用户贡献者DrZoo为我们提供了答案:

    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

    选项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缩放。

    how-do-you-adjust-google-chromes-ui-scaling-01

    Option #2 (Seems To Be The Most Successful)

    选项2(似乎是最成功的)

    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

    选项#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 固定缩放比例

    展开全文
  • 网页缩放设置

    2018-12-27 10:44:30
    Chrome 浏览器 网页缩放 设置 - 搜索“缩放” - 网页缩放 - 150 360 浏览器 网页缩放 查看 - 缩放比例150% - 缩放比例对所有网页生效
  • 网页缩放,页面展示比例不变

    千次阅读 2020-06-24 14:30:18
    获取网页缩放值(网上找的) detectZoom () { let ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixel...
  • 例子 <!DOCTYPE html> <html> ...网页按照比例缩放</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style ty...
  • 主要介绍了JS网页图片按比例自适应缩放实现方法,有需要的朋友可以参考一下
  • pc端网页比例缩放

    千次阅读 2019-08-02 23:49:44
    <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="white"> 也设置百分比body
  • 照片旋转比较容易,但是控制照片的缩放比例旋转例子不是很多,要想旋转过程中控制大小防止照片撑破网页需要修改coos.ui.rotate.js中p width和p.height的值
  • 声明:本文章摘自网上一位友人的,但由于意外,网页被关闭,没有及时记录他的信息,如有发现原作者,请告知,本人尽快将原作者以及原文章地址补充进来.thumbnail{overflow:hidden;width:400px;height:240px;}$...
  • 网页比例缩放的时候 导致有些 宽度不满屏幕: 导致这种情况,直接在 html{ position: absolute; 设置绝对定位就可以了,记得不需要写适应的meta
  • 在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。 Javascript: 代码如下: < ...
  • JS设置浏览器缩放比例

    千次阅读 2020-08-27 09:31:28
    JS设置浏览器缩放比例 因为 windows10 的操作系统,尽管是19201080的分辨率,但是发现我的页面显示是正常的,但是我同学打开说滚动条特别多,然后就特别的丑陋,尤其是出现了横向的滚动条,这个就很难让人接受,但是...
  • 图片等比例缩放,jQuery和js的两种图片等比例缩放效果,简单实用。
  • 有时候在网页中上传的图片尺寸过大,显示的时候造成错位,网页不美观。此源码可以将图片按照比例缩放到自定义大小。
  • 工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: 代码如下: <meta name="viewport" content="width=device-...
  • 图片缩放比例缩放 图片等比例缩放比例缩放JS代码 JS代码 WEB网页制作。。
  • 我刚刚发现,谷歌浏览器在缩放比例为100%的时候,我的部分博客...请pc端的朋友在阅览博客时,把浏览器的缩放比例调整到110% ,即可解决这个问题。感谢您的阅读! 快捷键ctrl+鼠标滑轮,即可快速调整缩放比例! ...
  • 浏览器固定缩放比例

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

    千次阅读 2016-08-04 18:18:00
    initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 转载于:...
  • 如果图片太大,需要按比例缩放。如下图。 瞄了一下,居中可以用 text-align:center; 来实现。而按比例缩放,利用预设 <img /> 的 width 、height 属性解决不了。因为用户图片可能是很长的,也可能是很宽...
  • css实现禁止缩放的方法:首先打开相应的前端代码文件;然后在meta标签中添加“maximum-scale=1.0, user-scalable=0”两个属性即可禁止页面缩放。本文操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。...
  • cef网页缩放策略

    千次阅读 2019-02-19 11:44:49
     为了解决这个问题,采用了控制cef缩放比例的方式来解决。  在OnBeforeCommandLineProcessing 中通过设置  double scale = GetAutoScale();  GetAutoScale()的想法是获取当前的DPI,计算...
  • 原生JavaScript制作网页div里面大图片按比例缩放排列
  • 怎么设置,能使得jsp页面各个模块区域在网页比例缩放的时候,还是保持原样?
  • 流式布局在现在的手机或网页...1,等比缩放布局创建等比缩放布局就是将网页分成几栏,然后用比例而非像素设定它们的宽度。以下面两栏布局为例: 111cn.net* {margin: 0px;padding: 0px;}.leftColumn {width: 33.3%;...
  • 今天使用了一下IE浏览器,发现无法对缩放比例进行调整,有点懊恼,菜单和状态栏都无调整选项,如下图,重置IE无效。 IE浏览器网页无法缩放怎么办 解决IE浏览器网页无法缩放的方法 IE浏览器网页无法缩放怎么办 解决IE...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,436
精华内容 9,774
关键字:

怎么调整网页缩放比例