zoukankan      html  css  js  c++  java
  • Js关于获取各种浏览器可见窗口大小的一点点研究

    在我本地测试当中:在IE、FireFox、Opera下都可以使用

    document.body.clientWidth

    document.body.clientHeight即可获得,很简单,很方便。

    而在公司项目当中:Opera仍然使用

    document.body.clientWidth

    document.body.clientHeight

    可是IE和FireFox则使用

    document.documentElement.clientWidth

    document.documentElement.clientHeight

    原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    如果在页面中添加这行标记的话

    在IE中:document.body.clientWidth ==> BODY对象宽度

    document.body.clientHeight ==> BODY对象高度

    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度

    在FireFox中:document.body.clientWidth ==> BODY对象宽度

    document.body.clientHeight ==> BODY对象高度

    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度?

    在Opera中: document.body.clientWidth ==> 可见区域宽度

    document.body.clientHeight ==> 可见区域高度

    document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    而如果没有定义W3C的标准,

    则IE为:document.documentElement.clientWidth ==> 0

    document.documentElement.clientHeight ==> 0

    FireFox为:document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    Opera为:document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

    document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

    就开发者来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。


  • 相关阅读:
    移动端调试Vconsole
    Vue-返回顶部
    Vue-封装loading
    Vue-水印封装
    Vue-封装scroll触底
    微信小程序-图片上传
    前端面试题(2)
    前端常见面试题
    服务端渲染(SSR)和客户端(CSR)渲染的区别
    什么是模块化?模块化开发的好处
  • 原文地址:https://www.cnblogs.com/see7di/p/2239893.html
Copyright © 2011-2022 走看看