精华内容
下载资源
问答
  • QQ邮箱的网页整体缩放效果,原来实现方法如此简单,下面有个实现示例,大家可以参考下
  • 页面缩放助手-crx插件

    2021-04-01 20:05:57
    语言:中文 (简体) ...功能简介:通过拖拉按钮实现网页缩放,也可以以1或10为单位,实现调整网页显示大小,让浏览更舒适功能说明:可以根据自己的需求设置页面缩放百分比,从而实现调整页面显示大小。
  • 今天小编就为大家分享一篇在Vue项目中,防止页面缩放和放大示例,具有很好的参考 价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了JS网页图片按比例自适应缩放实现方法,有需要的朋友可以参考一下
  • 1、页面缩放用到的技术点 (1)zoom zoom:normal | <number> | 默认值:normal 适用于:所有元素 继承性:有 可以使用用浮点数和百分比来定义缩放比例。 zoom的浏览器兼容性:http://caniuse.com/#search=zoom ...
  • 主要介绍了如何通过viewport实现jsp页面支持手机缩放,需要的朋友可以参考下
  • 主要介绍了JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • zoom实现网页缩放.zip

    2019-06-29 14:54:47
    图片缩放 查看图片内部细节 点入图片 细节 进入另一张图片
  • 主要介绍了js实现整体缩放页面适配移动端,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法,涉及javascript页面元素与事件相关操作技巧,需要的朋友可以参考下
  • 禁止浏览器缩放网页的HTML代码

    热门讨论 2013-03-30 21:41:52
    这是一个禁止浏览器缩放网页的HTML代码,主要用于手机浏览器,防止用户缩放导致排版错轮用的!
  • 手机浏览网页页面缩放

    千次阅读 2017-12-11 11:40:51
    即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。 所有的缩放值都必须...

    原文出处:http://blog.csdn.net/joyhen/article/details/43266927

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

    width - viewport的宽度 height - viewport的高度
    initial-scale - 初始的缩放比例
    minimum-scale - 允许用户缩放到的最小比例
    maximum-scale - 允许用户缩放到的最大比例
    user-scalable - 用户是否可以手动缩放

    viewport 语法介绍:

        <meta name="viewport"
            content="
                height = [pixel_value | device-height] ,
                width = [pixel_value | device-width ] ,
                initial-scale = float_value ,
                minimum-scale = float_value ,
                maximum-scale = float_value ,
                user-scalable = [yes | no] ,
                target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

    width

    控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

    height

    和 width 相对应,指定高度。

    target-densitydpi

    一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

    下面是 target-densitydpi 属性的 取值范围

    device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。

    high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。

    medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.

    low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。

    value – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

        <!-- html document -->
        <meta name="viewport" content="target-densitydpi=device-dpi" />
        <meta name="viewport" content="target-densitydpi=high-dpi" />
        <meta name="viewport" content="target-densitydpi=medium-dpi" />
        <meta name="viewport" content="target-densitydpi=low-dpi" />
        <meta name="viewport" content="target-densitydpi=200" />

    为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的width定义为与设备的width匹配,这样你的页面就可以和屏幕相适应。

    initial-scale

    初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

    maximum-scale

    最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

    user-scalable

    用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。

    所有的缩放值都必须在0.01–10的范围之内。

    例:

    (设置屏幕宽度为设备宽度,禁止用户手动调整缩放)

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

    (设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)

    展开全文
  • 页面缩放-crx插件

    2021-04-03 13:45:37
    语言:English,中文 (简体) 缩放当前页或所有页面,也可按域名指定缩放,亦可锁定缩放。 Zoom current tab or all tabs, lock it too.Also, zoom by domains.
  • Js 实现页面缩放

    2019-09-23 16:39:52
    分享一个很棒的东西::::: ...1、将下面这段 js 放在页面的<head>中 function bodyScale() { var devicewidth = document.documentElement.clientWidth; var scale = devicewidth / 1440...

    分享一个很棒的东西:::::

    优点:不用考虑适配问题,按设计稿进行固定尺寸开发。

    1、将下面这段 js 放在页面的<head>中

    function bodyScale() {
        var devicewidth = document.documentElement.clientWidth;
        var scale = devicewidth / 1440;  // 分母——设计稿的尺寸
        document.body.style.zoom = scale;
    }
    window.onload = window.onresize = function () {
        bodyScale();
    };

    2、按照设计稿进行固定开发

    设计稿切换至px模式,就直接按标注的写啦~

     

    转载于:https://www.cnblogs.com/lyr1213/p/8658002.html

    展开全文
  • 网页缩放页面展示比例不变

    千次阅读 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. 获取网页缩放值(网上找的)
    detectZoom () {
          let 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;
       }
    
    1. 监测缩放
    window.addEventListener('resize', this.handleScreen);
    
    1. 以100%缩放为比例,更改body的zoom值
    handleScreen() {
          const vm = this;
          const m = vm.detectZoom();
          document.body.style.zoom = 100/Number(m);
     }
    

    完整代码

    mounted() {
        this.handleScreen();
        window.addEventListener('resize', this.handleScreen);
     },
     destroyed() {
        window.removeEventListener('resize', this.handleScreen);
     },
     methods: {
    	handleScreen() {
          const vm = this;
          const m = vm.detectZoom();
          document.body.style.zoom = 100/Number(m);
        },
        detectZoom () {
          let 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;
        }
    }
    
    展开全文
  • 禁止页面缩放

    万次阅读 2017-08-07 21:21:20
    这里讲解一下如何禁止页面缩放,其实也就是一句话的事情: , initial-scale=1.0, maximum-scale=1.0, user-scalable=no">在这个里面主要有这几个属性:width - viewport的宽度 height -

    这里讲解一下如何禁止页面缩放,其实也就是一句话的事情:

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

    在这个里面主要有这几个属性:

    width             - viewport的宽度 
    
    height            - viewport的高度
    
    initial-scale     - 初始的缩放比例
    
    minimum-scale     - 允许用户缩放到的最小比例
    
    maximum-scale     - 允许用户缩放到的最大比例
    
    user-scalable     - 用户是否可以手动缩放
    

    如果要禁止页面缩放,只要把user-scalable 设置成no 就可以

    展开全文
  • 0.webview页面自适应: // 1、LayoutAlgorithm.NARROW_COLUMNS : 适应内容大小// 2、LayoutAlgorithm.SINGLE_COLUMN:适应屏幕,内容将自动缩放webview.getSettings().setUseWideViewPort(true);webview....
  • 浏览器网页缩放页面的影响

    千次阅读 2018-07-23 23:21:10
    如果元素有设置max-width或者min-width,缩放到一定程度是该元素就不会受到缩放倍数的影响(放大时页面会产生滚动条); 如果页面是百分比布局,没有设置max-width或者min-width,窗口不会产生滚动条。...
  • js 监听页面缩放

    千次阅读 2020-07-21 15:20:00
    js 监听页面缩放,主要用在浏览器发生页面缩放时,对页面布局进行调整,比如网站飘窗,通过js监听页面缩放调整飘窗位置。 创建onzoom函数 // detect resize (function() { var oldresize = window.onresize; ...
  • JS 页面缩放 鼠标滑轮 控制

    热门讨论 2012-09-21 11:26:40
    通过js来实现鼠标滑轮+组合键来缩放页面的效果
  • 解决html网页缩放问题

    千次阅读 2020-04-21 12:09:03
    1,每当我们学习过div布局的时候,你肯定会有这样的疑问:为什么别人的网页无论怎么缩放都不会影响它的想对位置,而我的页面在使用浏览器对页面进行放大缩小的时候,有时候会出现错位,或者边框无法吻合。将页面缩小...
  • 页面整体缩放CSS

    千次阅读 2019-09-23 11:39:06
    body { zoom: 1; -moz-transform: scale(1); -moz-transform-origin: 0 0; }
  • <meta name="viewport" content=...ps:禁止Html5在手机上屏幕页面缩放 最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小。即相当于这样设置 <meta name="viewport" content="wid
  • C# WebBrowser页面内容缩放

    热门讨论 2012-08-09 15:32:46
    继承WebBrowoser控件,新增页面内容缩放功能。。。
  • 首先用大div包住position:relative,整个内容再用一个div包住,position:absolute;left:50%;right:50%; 其他内容再进行布局,这样不管页面怎么调正大小也不会布局紊乱
  • html 等比缩放页面

    千次阅读 2021-03-11 10:50:26
    根据浏览器窗口等比缩放页面 实现思路 通过css的transform scale属性对页面body元素进行缩放 缩放比例为实际窗口尺寸/设置的body像素尺寸,选择(窗口宽/body宽)和(窗口高/body高)中较小的一个 body缩放之后,位置相...
  • 今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • css 网页缩放的两种情况

    千次阅读 2019-12-09 13:45:29
    相当于图片的缩放,初始化的网页的布局是什么样,缩放完之后还是什么样。只是大小变了。 浏览器对网页进行缩放 1 如果你设置的是百分比, 1.1 如果外层没有别的dom,那么当前dom是相对于浏览器的窗口进行缩放的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 127,688
精华内容 51,075
关键字:

怎么把网页缩放