`
wxb_j2ee
  • 浏览: 138659 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

改变浏览器大小自动获取宽高

阅读更多
<div id="content" style="color: red;"></div>
<script type="text/javascript">
    <!--
      var winWidth = 0;
      var winHeight = 0;
      // 函数:获取尺寸
      function findDimensions()
      {
        // 获取窗口宽度
        if (window.innerWidth)
          winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
          winWidth = document.body.clientWidth;
        // 获取窗口高度
        if (window.innerHeight)
          winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
          winHeight = document.body.clientHeight;
        // 通过深入 Document 内部对 body 进行检测,获取窗口大小
        if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
        {
          winHeight = document.documentElement.clientHeight;
          winWidth = document.documentElement.clientWidth;
        }
        // 结果设置到Div上
        $("#content").width(winWidth); 
        $("#content").height(winHeight);
        }
        findDimensions();
        // 调用函数,获取数值
        window.onresize=findDimensions;
        //-->
</script>

  支持火狐和IE

分享到:
评论

相关推荐

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    首先,我们需要了解浏览器窗口的宽高是可以通过JavaScript对象属性获取的。在脚本中,我们通常使用document对象的documentElement属性来获取整个HTML文档的根元素,进一步通过offsetWidth属性获取当前浏览器窗口的...

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

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

    获取浏览器当前页面地址栏的URL

    在IT领域,尤其是在Windows应用程序开发中,经常需要与系统中的其他进程交互,比如获取浏览器当前页面的URL。...在实际开发中,这样的功能可能会被用于自动化测试、网页监控或其他需要获取浏览器状态的应用场景。

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    JS判断浏览器分辨率自动调用不同CSS

    首先,我们需要了解JavaScript是如何获取浏览器分辨率的。在JavaScript中,`window.innerWidth` 和 `window.innerHeight` 属性分别提供了浏览器视口的宽度和高度。视口是用户当前可见的部分,不包括浏览器的工具栏和...

    jquery实现根据浏览器窗口大小自动缩放图片的方法

    通过这个方法,图片能够在浏览器窗口大小改变时自动调整尺寸,保持相对比例,从而提供良好的响应式布局效果。这种方法特别适用于响应式网站设计,可以确保图片在不同设备和屏幕尺寸上都能正常显示。同时,由于使用了...

    js 改变 框架 大小

    2. **改变iframe大小**:为了实现这一功能,可以使用鼠标按下(`mousedown`)和鼠标释放(`mouseup`)事件来分别调用改变大小的函数。 ```javascript $("#buttonID").mousedown(function(){ // 转到子页面的函数 ...

    jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果

    2. **计算文本大小**:可以使用JavaScript获取元素的宽度(`element.clientWidth`)和字体大小,根据屏幕尺寸调整字体大小以保持一定的行宽。例如,可以设置一个最大和最小字体大小限制,确保在小屏幕和大屏幕上都有...

    iframe自适应高度(兼容多种浏览器)

    2. **事件监听**:除了在页面加载完成后调用调整高度的方法外,还应该监听窗口的`resize`事件,以便在窗口大小改变时重新计算`iframe`的高度。 3. **错误处理**:在某些情况下,如`iframe`加载失败或内容为空时,...

    kindEditor4.1版修改上传图片宽高(图片自适应)

    - 图片宽度能够自动根据容器(如浏览器窗口)的宽度调整,通常通过设置宽度为百分比来实现。 - 避免图片高度硬编码,使其随宽度变化而等比例变化,确保图片不失真。 #### 二、kindEditor4.1源码解析与修改方案 ...

    通过JS自动调整图片的大小以适应div的高和宽

    这段JS代码首先获取div容器和图片元素的当前宽度和高度,然后根据图片的自然宽高比(`naturalWidth`和`naturalHeight`属性)计算出合适的尺寸。如果图片的高度超过了容器高度,就反过来调整宽度,确保图片始终适应...

    网页图片自动按照比例缩放到指定大小

    这样,无论上传的图片尺寸多大,它都会根据浏览器窗口的大小自动缩放,而不会失真。 如果需要在JavaScript中动态调整图片尺寸,可以使用以下方法。假设我们有一个图片元素`&lt;img id="targetImg" src="1.jpg"&gt;`,我们...

    web图片缩放改变图片的大小

    需要注意的是,如果只设置一个尺寸,另一个尺寸会按比例自动调整,以保持原始的宽高比。 其次,CSS也是调整图片大小的重要工具。我们可以使用`style`属性直接在HTML中定义样式,或者在外部CSS文件中设置。例如: `...

    jQuery自动改变文字大小特效代码

    jQuery自动改变文字大小特效代码是基于JavaScript库jQuery的一款实用插件——jQuery.fontFlex。这款插件主要用于网页设计,能够使页面中的文字根据浏览器窗口尺寸的变化而自动调整大小,以达到良好的可读性和用户...

    Flash自动定位窗口技术

    // 这里根据舞台宽高调整你的对象位置和大小 } ``` 3. 设置对象位置:根据计算出的新尺寸,你可以使用DisplayObject的x和y属性来设置对象的位置,或者使用setChildIndex()方法来改变对象的层级关系,以确保它们始终...

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    图片等比例缩放是指在调整图片大小时,保持图片的宽高比不变,避免图片因缩放导致的变形。这种技术尤其在响应式网页设计中非常有用,可以确保图片在不同尺寸的屏幕上均能保持美观。 在给定的文件内容中,描述了一个...

    jQuery自动适应高度布局代码.zip

    在网页设计中,为了实现良好的用户体验,经常需要让页面元素能够根据浏览器窗口的大小自动调整其高度,确保内容能够完整且美观地展示。jQuery库提供了一系列强大的API,使得这种自动适应高度的布局变得简单易行。...

    jQuery实现背景图片随着窗口的改变自动调整自适应窗口大小.zip

    "jQuery实现背景图片随着窗口的改变自动调整自适应窗口大小"是一个常见的需求,主要涉及到响应式设计、CSS样式控制以及jQuery库的运用。 首先,响应式设计是现代网页设计的核心概念,它要求网站能够根据访问设备的...

    jquery插件ez-bg-resize背景自适应浏览器的大小.zip

    《jQuery插件ez-bg-resize:实现背景自适应浏览器大小》 在网页设计中,背景图像的自适应性是提升用户体验的重要因素之一。一个优秀的网页应该能够根据浏览器窗口的大小变化,动态调整背景图像的显示,以保持视觉的...

    JQ与CSS两种方式实现背景图片随窗口改变,兼容多浏览器

    这段代码中,我们获取了窗口和图片的尺寸,然后计算出缩放比例,以保持原始宽高比。之后,我们根据缩放后的尺寸调整图片的位置,使其居中。`#background-image`是图片元素的ID,需要根据实际HTML结构进行修改。 这...

Global site tag (gtag.js) - Google Analytics