精华内容
下载资源
问答
  • 页面缩放

    2019-07-19 14:34:09
    之前写移动端页面时,突然出现ios和安卓页面显示不一致的问题,在ios系统上,页面字体,输入框等变得特别小,是使用iframe打开页面的,刚开始以为是打开方式的问题,后来对比其他页面看了一下,才发现是meta的问题,...

    之前写移动端页面时,突然出现ios和安卓页面显示不一致的问题,在ios系统上,页面字体,输入框等变得特别小,是使用iframe打开页面的,刚开始以为是打开方式的问题,后来对比其他页面看了一下,才发现是meta的问题,移动端加上 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">就可以了。

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

    移动端页面meta

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    

    PC端meta

    <meta charset="utf-8">
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    
    
    展开全文
  • 禁止页面缩放

    万次阅读 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 就可以

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

    2021-04-01 20:05:57
    语言:中文 (简体) ...功能简介:通过拖拉按钮实现网页缩放,也可以以1或10为单位,实现调整网页显示大小,让浏览更舒适功能说明:可以根据自己的需求设置页面缩放百分比,从而实现调整页面显示大小。
  • js 监听页面缩放

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

    js 监听页面缩放,主要用在浏览器发生页面缩放时,对页面布局进行调整,比如网站飘窗,通过js监听页面缩放调整飘窗位置。

    • 创建onzoom函数
    // detect resize
    (function() {
      var oldresize = window.onresize;
      window.onresize = function(e) {
        var event = window.event || e;
        if(typeof(oldresize) === 'function' && !oldresize.call(window, event)) {
          return false;
        }
        if(typeof(window.onzoom) === 'function') {
          return window.onzoom.call(window, event);
        }
      }
    })();
    
    • 获取页面缩放比例
    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;
    }
    
    • 具体业务代码
    setTimeout(function () {
      if (detectZoom() >= 125) {
        $('.piaochuang').css('left', '0px');
      } else {
        $('.piaochuan').css('left', '8%');
      }
    }, 1000)
    
    window.onzoom = function(e) {
      // zoom even
      if (detectZoom() >= 125) {
        $('.piaochuang').css('left', '0px');
      } else {
        $('.piaochuan').css('left', '8%');
      }
    };
    

    最后安利下自己的小程序,一款程序员刷题小程序。

    在这里插入图片描述

    展开全文
  • 主要介绍了解决HTML5手机端页面缩放的问题的相关资料,需要的朋友可以参考下
  • safari页面缩放文件

    2013-06-10 23:28:41
    mac 操作系统 os x safari 样式表格 页面缩放文件。可以更改该文件。
  • 行业资料-电子功用-电子设备及其页面缩放方法.pdf
  • 行业资料-电子功用-电子装置及其页面缩放方法.pdf
  • Js实现禁止浏览器页面缩放 //阻止pc端浏览器缩放js代码 //解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况 $(document).ready(function () { // chrome浏览器 $('body').css('zoom', 'reset'); $...

    Js实现禁止浏览器页面缩放

    //阻止pc端浏览器缩放js代码
    //解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况
    $(document).ready(function () {
        // chrome浏览器
        $('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();
            }
        });
        // firfox浏览器
        $(window).bind('mousewheel DOMMouseScroll', function (event) {
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
        });
    });
    
    展开全文
  • 主要介绍了微信小程序页面缩放式侧滑效果的实现代码,实现原理就是通过点击按钮,往需要动画的div中添加或移除拥有动画效果的class。具体实例代码大家跟随小编一起通过本文学习吧
  • 使用“自定义页面缩放”扩展程序,您可以为每个网站设置单独的缩放级别。此外,您可以为每个页面设置X和Y位置。一些功能:1.从浏览器的工具栏弹出窗口轻松为每个网站添加自定义缩放级别 2.为每页设置X和Y位置 3....
  • 页面缩放-crx插件

    2021-03-21 21:16:54
    缩放当前页或所有页面,也可按域名指定缩放,亦可锁定缩放缩放当前标签页或所有标签页,也将其锁定。另外,按域缩放。 支持语言:English,中文 (简体)
  • 示例代码: &lt;!DOCTYPE html&gt; &...--禁止页面缩放--&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-sc
  • 在PC端缩放浏览器的页面主要有三种方式:Ctrl+(+/-)组合Ctrl+鼠标轮滑浏览器菜单我们是禁止不了用户通过浏览器缩放页面,只能通过对有键盘或鼠标事件的快捷方式做监控,从而实现禁止缩放的快捷方式。禁止Ctrl+(+/-)...
  • 用js控制页面图片等比缩放 css图片等比缩放 比例缩放显示 js 页面 缩放图片 js缩放图片 图片按比例缩放页面上部head部分加cssimg {max-width: 670px;width:expression(this.width > 670 ? "670px" : (this.width+...
  • 页面缩放导致滚动加载失效

    千次阅读 2019-10-10 16:40:49
    页面缩放时会导致初始化滚动条页面不存在,无法滚动加载数据 解决方法 当不存在滚动条时利用滚轮事件代替滚动条事件,滚动条出现恢复滚动事件(这里需要恢复滚动条事件是由于拖动滚动条的时候也能触发) 1.给dom...
  • 鼠标上下滚动,缩放页面,引起视觉差
  • 设置Webview的页面缩放大小

    万次阅读 2016-10-24 19:41:07
    之所以要把这个简单的WebView拿出来单独写除了简单的webview加载页面缩放的设置还是因为在此Fragment中有个小细节需要单独说下 是这样的,此Fragment依托于上层Activity,上层Activity继承自ActionBarActivity,...
  • 移动端阻止浏览器页面缩放(safari也好使) window.onload = function() { // 阻止双击放大 var lastTouchEnd = 0; document.addEventListener('touchstart', function(event) { if (event.touches.length > ...
  • 1、页面缩放用到的技术点 (1)zoom zoom:normal | <number> | 默认值:normal 适用于:所有元素 继承性:有 可以使用用浮点数和百分比来定义缩放比例。 zoom的浏览器兼容性:http://caniuse.com/#search=zoom ...
  • 1.viewport这种方法,不是所有的浏览器都兼容2.百分比这种方法,可以兼容大部分浏览器,...}3.csstransform这种方法,可以兼容大部分浏览器,但是页面的位置是居中的.w320{transform: scale(1,1);-ms-transform: ...
  • Iframe左侧页面缩放

    2014-04-16 16:27:18
    页面分为两个Iframe,左侧一般用于二级菜单或者树形界面,可以通过点击Iframe之间分割线的图标进行左侧菜单的缩放
  • 禁止web页面缩放 在本地组策略中 找到InternetExplorer中的禁止缩放,启用就好了
  • JS设置页面缩放显示

    千次阅读 2015-11-19 16:44:12
    设置页面缩放显示方法如下: // 获取当前窗口宽度和高度 var width = $(window.top).width(); var height = $(window.top).height(); // 按照原始尺寸320*480计算缩放值 var scaleX = width /...
  • 页面缩放布局控制

    千次阅读 2012-04-13 22:46:56
    页面缩放影响到布局有很多种情况,在此仅记录我遇到过的一种情况: 自己在做业面过程总,经常遇到一个问题: 页面控件需要与背景图片对应上,例如下图所示:             图中显示为背景图片,现欲...
  • &lt;meta name="viewport" content="width=device-width,user-...width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的最小比例maxi...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 112,472
精华内容 44,988
关键字:

页面缩放