浏览器缩放检测的js代码

 更新时间:2014年09月28日 23:19:13   作者:99js  
这篇文章主要介绍了浏览器缩放检测的js代码,需要的朋友可以参考下

测试代码

http://jsbin.com/dipijeqi/11


效果:


chrome

复制代码 代码如下:

window.devicePixelRatio : 2  (准确)
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 2
document.documentElement.offsetHeight / window.innerHeight : 0.020618556701030927 (有相关性)
window.top.outerWidth / window.top.innerWidth : 2

ff

复制代码 代码如下:

window.devicePixelRatio : 1.5 (准确)
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 1.0114583333333333
document.documentElement.offsetHeight / window.innerHeight : 0.023391812865497075  (有相关性)
window.top.outerWidth / window.top.innerWidth : 1.0114583333333333

ie 8

复制代码 代码如下:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5416666666666667 (大致准确)
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

ie11

复制代码 代码如下:

window.devicePixelRatio : 1.5 (准确)
screen.deviceXDPI / screen.logicalXDPI : 1.5
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 0.02203856749311295 (有相关性)
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

ie10

复制代码 代码如下:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 1
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

ie9

复制代码 代码如下:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 1
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

360 6.3(完全没反应)

复制代码 代码如下:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

360极速浏览器

复制代码 代码如下:

window.devicePixelRatio : 1
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 1.5
document.documentElement.offsetHeight / window.innerHeight : 0.015267175572519083
window.top.outerWidth / window.top.innerWidth : 1.5(准确)

搜狗高速浏览器 (完全没反应)

复制代码 代码如下:

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

淘宝浏览器

复制代码 代码如下:

window.devicePixelRatio : 1
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 2.0710059171597632  (大致准确)
document.documentElement.offsetHeight / window.innerHeight : 0.022988505747126436
window.top.outerWidth / window.top.innerWidth : 2.0710059171597632

相关文章

  • uniapp介绍与使用以及小程序实时获取视频播放时间

    uniapp介绍与使用以及小程序实时获取视频播放时间

    这篇文章主要给大家介绍了关于uniapp介绍与使用以及小程序实时获取视频播放时间的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • bootstrap使用validate实现简单校验功能

    bootstrap使用validate实现简单校验功能

    这篇文章主要为大家详细介绍了bootstrap使用validate实现简单校验功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript实现table切换的插件封装

    JavaScript实现table切换的插件封装

    这篇文章主要为大家详细介绍了JavaScript实现table切换的插件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Add Formatted Text to a Word Document

    Add Formatted Text to a Word Document

    Add Formatted Text to a Word Document...
    2007-06-06
  • CSS(js)限制页面显示的文本字符长度

    CSS(js)限制页面显示的文本字符长度

    限制页面显示的字符长度,一直被众多网友倾睬,本人也是一fans利用闲暇时间搜集整理了一些实用技巧,需要了解的朋友可以参考下
    2012-12-12
  • 原生JS实现几个常用DOM操作API实例

    原生JS实现几个常用DOM操作API实例

    下面小编就为大家带来一篇原生JS实现几个常用DOM操作API实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • js实现轮播图效果 纯js实现图片自动切换

    js实现轮播图效果 纯js实现图片自动切换

    这篇文章主要为大家详细介绍了js实现轮播图效果,图片自动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js数组案例之五子棋游戏

    js数组案例之五子棋游戏

    这篇文章主要为大家详细介绍了js数组案例之五子棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Bootstrap每天必学之模态框(Modal)插件

    Bootstrap每天必学之模态框(Modal)插件

    Bootstrap每天必学之模态框(Modal)插件,模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript中三种常见的排序方法

    JavaScript中三种常见的排序方法

    本篇文章主要介绍了JavaScript中三种常见的排序方法:快速排序、插入排序、冒泡排序,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论