您的位置：首页 > Web前端 > JavaScript

网页的宽高时时随浏览器缩放而缩放

2014-04-03 14:23 435 查看

一、宽度和高度设置成百分比，不要设置固定的值。例子如下：

<body style=" width:100%; height:100%">

<embed src="http://player.youku.com/player.php/sid/XNjkzNTc0NTE2/v.swf"  width="100%" height="100%" ></embed>

</body>

上面的方法在google和火狐中可以显示正常，上面的代码需要注意一下几点：

1. body标签的宽和高需要设置为100%，在此处是父标签，如果不设置的话宽可以实现随浏览器缩放二缩放，高度不可以。

二、下面讲述使用Js时时获取浏览器当前的宽和高然后赋值给所需元素。下面的代码只是时时获取浏览器的高然后赋值给id为body1 的元素。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>生产商第一步</title>
<script type="text/javascript" language="javascript">
function getWindowSize() {
var h;

if(typeof document.compatMode != 'undefined' && document.compatMode == 'CSS1Compat') {
h = document.documentElement.clientHeight;
} else if(typeof document.body != 'undefined' && (document.body.scrollLeft || document.body.scrollTop)) {
h = document.body.clientHeight;
}

return h;
}

function getsize(){
var size = getWindowSize();
//document.getElementById("body1").value = size.x;
document.getElementById("body1").style.height= size-20+"px";
}

window.onload = function(){
var currentHeight = document.documentElement.clientHeight;
var body1 = document.getElementById("body1");
body1.style.height= currentHeight-20+"px";
}

</script>
</head>

<body style=" width:98%;" id = "body1"  onresize="getsize()">
<embed src="http://player.youku.com/player.php/sid/XNjkzNTc0NTE2/v.swf" allowFullScreen="true" quality="hight" width="100%" height="100%" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" ></embed>
</body>
</html>

上面的代码分为两步：

1. 在页面首次载入的时候根据浏览器的高度设置body1元素的高度

2. 使用onresize="getsize()"时时监控浏览器的缩放情况，然后根据浏览器的高来设置body1元素的高度。

上面代码注意以下几点：

1. body1.style.height= currentHeight-20+"px";这段代码是设置body1元素的高度，此处必须要加上px否则没效果。

三、下面附带一些js获取浏览器高度的知识。

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高）

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html javascript 浏览器 firefox 高度宽度

相关文章推荐

新的分享

章节导航