您现在的位置是:首页 > 正文

控制台查看网页的宽高随浏览器缩放而缩放

2024-01-30 20:24:27阅读 2

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

<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"  οnresize="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. 使用οnresize="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 相对文档的水平座标+垂直方向滚动的量

网站文章

  • 创建自己的yum源

    创建自己的yum源

    创建自己的yum源2013-02-28 09:18 2328人阅读 评论(0) 收藏 举报 分类:Linux(172) 目录(?)[+]转自:http://www.bsdmap.com/2011/07/06/createrepo/创建自己的yum源  最终还是决定使用rpm来管理系统上“定制”的

    2024-01-30 20:24:19
  • cocos creator 使用第三方包

    NPM 模块使用方法: 运行npm安装命令时当前的路径应该在项目的根目录(也就是包括 assets, library 这些目录的根目录)npm install xxx --save 时可以加上 save 指令,自动生成 package.json 方便其他人共享开发环境设置安装完成之后,在 assets 目录下的用户脚本里使用 var npmModule = require(&#39;npmM

    2024-01-30 20:24:12
  • 开发工具之IDEA

    开发工具之IDEA

    欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法...

    2024-01-30 20:23:41
  • Unity 升级项目到Urp(通用渲染管线)以及画面后处理 热门推荐

    Unity 升级项目到Urp(通用渲染管线)以及画面后处理 热门推荐

    前言: Urp是一种SRP(可编程渲染管线),相比于默认渲染管线,在提升画面表现的同时,也可以提升游戏的性能表现 开始升级前准备 在开始之前,需要你备份你的项目,确保在升级过程中出现问题还有挽回的空间...

    2024-01-30 20:23:32
  • android9.0与5g,5G双卡+Android9.0!vivo年度最强旗舰机曝光

    android9.0与5g,5G双卡+Android9.0!vivo年度最强旗舰机曝光

    原标题:5G双卡+Android9.0!vivo年度最强旗舰机曝光伴随着2019年的临近,5G时代越来越近,高通、英特尔、华为、三星等都陆续宣布将会推出5G基带,高通更是在近期宣布开始量产基于7nm工...

    2024-01-30 20:23:26
  • html一张图片水平居中,CSS 图片水平居中

    html一张图片水平居中,CSS 图片水平居中

    使用CSS让图片中网页中水平居中代码:text-align:center内容居中text-align:center介绍:text-align:center为水平内容居中功能,图片放入网页中是使用img...

    2024-01-30 20:22:58
  • 通过AWS云平台 构建云上勒索病毒防护体系,轻松保护数据完整性

    通过AWS云平台 构建云上勒索病毒防护体系,轻松保护数据完整性

    因为AWS采用责任分担模型来明确用户和AWS之间的安全责任,当您选择使用这些服务时,您将不再需要将精力放在如何给操作系统安装补丁,如何保护操作系统的密钥,是否有防病毒措施等安全问题上,这些工作将由AW...

    2024-01-30 20:22:52
  • 深入理解JVM 一GC(下) G1 Garbage Collector

    深入理解JVM 一GC(下) G1 Garbage Collector

    关于java程序性能当我们调优java程序时,通常的目标有两个: 响应能力 或者 吞吐量响应能力响应能力指一个程序或者系统对请求的是否能够及时响应。 比如: 一个桌面UI能多快的响应一个事件; 一个网站能够多快返回一个页面请求; 数据库能够多快返回查询的数据;对于这类对响应能力敏感的场景,长时间的停顿是无法接受的。吞吐量吞吐量关注的是,在一个指定的时间内,最大化一个应用的工作量。 如下方

    2024-01-30 20:22:46
  • 【Linux】系统调用文件操作

    【Linux】系统调用文件操作

    Linux系统没有文本和二进制之分,所有的东西都是文件,文件描述符是一个整形数字,储存在PCB的文件描述符表中(一个数组)

    2024-01-30 20:22:19
  • linux用户管理常用命令

    主题:linux用户管理常用命令 1)管理用户(user)的工具或命令; useradd 注:添加用户 adduser 注:添加用户 passwd 注:为用户设置密码 usermod 注:修改用户命令,可以通过usermod 来修改登录名、用户的家目录等等; pwcov 注:同步用户从/etc/passwd 到/etc/shadow pwck 注:pwck是校验用户配置文件/etc/passwd

    2024-01-30 20:22:12