`

怎么知道页面被放大缩小了

阅读更多
有个投诉说页面变形了,一问才知道页面被用户不小心zoom了,这个情况最好是能对用户有个提示。写了个IE和firefox下检测zoom的demo:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< BODY >
< div  id ="output" ></ div >
< SCRIPT  LANGUAGE ="JavaScript" >
<!--
( function (){
    window.onresize = testZoom;
     var  _screenOriginalWidth = window.screen.width
     function  testZoom(){
         if (window.screen.width < _screenOriginalWidth){
            document.getElementById( " output " ).innerHTML = " <br>放大啦 " ;
        }
         if (window.screen.width > _screenOriginalWidth){
            document.getElementById( " output " ).innerHTML = " <br>缩小啦 " ;
        }
        _screenOriginalWidth = window.screen.width
    }
})()
// -->
</ SCRIPT >
</ BODY >
</ HTML >
分享到:
评论

相关推荐

    网页放大缩小按钮效果.rar

    网页放大缩小按钮效果是网页设计中的一个重要组成部分,它允许用户根据个人需求调整页面的缩放比例,以获得最佳的浏览体验。在JavaScript(JS)特效领域,这种功能通常通过编写自定义代码或利用内置浏览器API来实现...

    【重要】js页面整体放大缩小兼容所有浏览器(ie及firefox等).html

    页面放大缩小代码,兼容所有浏览器,代码简单,易学易用。

    禁止微信页面放大与缩小

    在微信页面开发中遇到,不同用户微信字体放大或者缩小的问题。 此代码可以使用户字体无论放大还是缩小的状态下都会保持不变。

    Scrollview滑动,并且单个页面也实现放大缩小,滑回来可还原

    本主题探讨的是如何在ScrollView中实现一个具有页面滑动功能,同时每个页面还能进行单独的放大缩小操作,当滑动到下一个页面再返回时,原页面能自动恢复到原来的大小。此外,还增加了双击屏幕实现快速放大的功能。 ...

    wpf实现鼠标滚轮放大缩小,键盘上下键放大缩小

    其中,Canvas允许我们直接通过坐标定位元素,这在实现放大缩小功能时会非常方便,因为我们可以直接调整元素的尺寸和位置。 要实现滚轮放大缩小,我们需要监听鼠标的滚轮事件。在WPF中,可以使用MouseWheel事件来...

    webBrowser 网页放大缩小

    在这个项目中,你需要创建上述的放大缩小功能,并与`WebBrowser`控件进行集成。 总结,通过使用`WebBrowser`控件,我们可以构建一个简单的网页浏览应用,并通过修改网页DOM来实现网页的放大和缩小功能。虽然这种...

    js 双指缩放,双指放大,双击放大,移动端双指放大缩小

    在移动设备上,为了提供更好的用户体验,特别是在处理图像或视图时,双指缩放(Pinch Zoom)和双击放大缩小(Double Tap Zoom)功能是必不可少的。这些手势操作在许多应用程序和网页中被广泛使用,特别是对于查看高...

    根据浏览器大小使网页内容自动放大缩小

    ### 根据浏览器大小使网页内容自动放大缩小 在现代网页设计中,为了提供更好的用户体验,网站需要能够自适应不同的屏幕尺寸。这不仅涉及到布局的变化,还包括文本、图片等元素的大小调整。本文将深入探讨一种利用...

    js图片放大缩小效果 商品展示 一

    在网页设计中,商品展示是至关重要的一环,而利用JavaScript实现图片的放大缩小效果能够提升用户体验,使用户能更清晰地查看商品细节。本篇主要介绍如何使用JavaScript库FancyZoom来实现这一功能。 FancyZoom是一款...

    pdf文件实现放大缩小功能

    在这个例子中,我们可能会用到名为"ZoomingPDFViewer"的项目,它可能是为实现PDF放大缩小功能而设计的一个特定组件或框架。 2. 图形渲染:PDF文件由多个页面组成,每个页面包含图形、文本和其他元素。在放大或缩小...

    浏览器窗口放大缩小后页面内容居中解决方法

    标题“浏览器窗口放大缩小后页面内容居中解决方法”揭示了我们今天要探讨的核心问题:如何使网页内容在浏览器窗口缩放时仍然保持居中对齐。 在描述中提到了一个链接到CSDN博客的文章,虽然具体内容无法直接展示,但...

    微信小程序swiper实现滑动放大缩小效果

    通过调用`setData`方法更新数据对象后,页面会自动根据新数据重新渲染,从而实现了图片放大缩小的动态效果。 整体而言,微信小程序中实现滑动放大缩小效果需要对swiper组件的布局和样式进行精确控制,并结合...

    C# webbrowse 放大缩小页面

    这样,我们就实现了在C#的WebBrowser控件中不使用Zoom属性的页面放大和缩小功能,可以避免图片在缩放过程中出现的失真问题。在实际应用中,可以根据具体需求调整缩放的步长、最小值和最大值,以及添加平滑过渡的动画...

    jquery手机网页放大缩小

    总结来说,使用jQuery实现手机网页上的图片放大缩小功能主要涉及以下几个核心知识点: 1. jQuery选择器和事件监听:用于获取和操作DOM元素,响应用户的点击或触摸。 2. CSS变换:通过`transform`属性实现图片的缩放...

    jquery图片放大缩小

    这个"jquery图片放大缩小"的项目就是一个典型的示例,它实现了当鼠标经过图片时,图片在div容器内自动放大的功能。下面我们将详细探讨相关的jQuery知识、图片处理技巧以及如何在HTML中应用这些技术。 首先,jQuery...

    pdf绘制实现放大缩小

    在显示PDF时,这些页面会被映射到屏幕上的像素,这涉及到一种叫做“设备无关图形”(Device Independent Graphics)的概念,确保在不同分辨率的设备上都能正确呈现。 实现放大缩小功能通常需要以下几个关键步骤: ...

    flex实现鼠标滚动放大缩小(以鼠标的位置为中心放大缩小)

    在本文中,我们将深入探讨如何使用Flex技术来实现在网页中通过鼠标滚动来实现图片的放大缩小,并且确保每次缩放都是以鼠标当前位置为中心进行的。Flex是一种强大的前端开发框架,它允许开发者创建灵活的、响应式的...

    放大缩小的组件

    在“放大缩小的组件”中,jQuery可能被用来绑定点击事件,获取和设置图片的大小,以及创建平滑的动画效果。 接着,我们关注到"zoom.js",这是一个专门用于实现图片缩放功能的JavaScript文件。在这个文件中,可能会...

    ET 滚轮键放大缩小 解压就能用

    `ET滚轮键放大缩小.exe` 是主执行文件,它是整个插件的核心部分,负责处理滚轮事件,控制页面缩放。当你双击这个文件时,插件会被启动,并且可能在后台运行,监听鼠标的滚轮动作,然后根据用户的设置来调整屏幕内容...

    JQuery点击放大缩小图片并可左右滑动

    "JQuery点击放大缩小图片并可左右滑动"这个功能就是一个典型的例子,它使得用户可以更方便地查看和浏览网页中的图片,同时也增加了页面的互动性和视觉吸引力。 JQuery是一个广泛使用的JavaScript库,它简化了DOM...

Global site tag (gtag.js) - Google Analytics