html5 获取页面的宽和高

最新推荐文章于 2023-10-09 11:12:55 发布
最新推荐文章于 2023-10-09 11:12:55 发布
阅读量3.8k 收藏 2
点赞数
分类专栏： # html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milijiangjun/article/details/81061345
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<script type="text/javascript">
<!--

function findDimensions() //函数：获取尺寸
		{
			var winWidth = 0;
			var winHeight = 0;
			//获取窗口宽度
			if (window.innerWidth){
				// console.log(1);
				 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;
			}
			//结果输出至两个文本框
				console.log("   w "+winHeight+"   h "+winWidth);
				console.log();
				//alert(winWidth);
		}


	findDimensions();
	//调用函数，获取数值
	window.οnresize=findDimensions;
//-->
</script>
	
</body>
</html>
这个方法兼容ie5以上版本
milijiangjun
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端获取各种宽高
weixin_42205405的博客
04-18 674
原文地址：https://segmentfault.com/a/1190000021446237作者：Fw恶龙本文首发于：思否 图片仅供参考，由于部分属性各个浏览器解释不一致，有些错误，等研究透后再修改。 1. 获取浏览器宽高 window.innerHeight：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高...
JS获取H5或浏览器宽高方法
weixin_52901235的博客
02-01 599
【代码】JS获取H5或浏览器宽高方法。
js获取屏幕、浏览器、页面的高度宽度
艾丽的博客
02-03 7930
本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。 一、介绍 1. 容器 一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。 HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。 通过Js的一些对象可以获取这些容器的高度、宽度。 2. 物理尺寸和分辨率 容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度。 如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。 3. 展示图 注意： 图中的body根
h5基础
最新发布
10-09 440
设备像素 750 * 1334设备独立像素 375 * 667屏幕分辨率 750 * 1334ppi 326一般设置的移动端最大和最小宽度。
H5获取屏幕的宽度和高度
RisaSama的博客
06-05 3941
H5获取屏幕的宽度和高度 通过JS获取 window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height 返回当前屏幕高度(分辨率值) window.document.body.offsetHeight
H5页面获取屏幕宽高
BubbleABC的博客
08-11 2626
H5页面获取屏幕宽高
【HTML5】JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度 (转载)
weixin_30457551的博客
05-04 1252
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：do...
html获取屏幕、浏览器、页面的高度与宽度
热门推荐
weixin_46353030的博客
02-24 1万+
一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身；对应关系如下： HTML元素–>页面–>浏览器–>屏幕 一、屏幕 screen.height //屏幕高度 screen.width //屏幕宽度 screen.availHeight //屏幕可用高度，即屏幕宽度减去上下任务栏后的高度 screen.availWidth //屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度 screen.height - screen.availHeight //任务栏高度 二、浏览器
js获取网页宽高
04-15
通过以上方法，我们可以灵活地在JavaScript中获取和处理网页的宽高信息，从而实现更精细的页面控制和优化用户体验。如果你想要深入了解这方面的知识，可以通过提供的博文链接...
宽屏商务公司HTML5模板
08-23
【宽屏商务公司HTML5模板】是一款专为商务合作公司设计的网页模板，它采用了现代网页设计的趋势，尤其是HTML5技术，以实现更丰富的交互性和兼容性。HTML5是超文本标记语言（HTML）的最新版本，其核心优势在于增强了...
宽屏html5企业网站模板
04-02
【宽屏HTML5企业网站模板】是现代网页设计中一种流行的风格，主要针对现代显示器的宽高比例，提供更广阔的视野和更好的视觉体验。在网页设计领域，宽屏设计不仅提升了网站的美观度，还能够有效地展示企业的品牌形象...
html5宽屏大气响应式餐厅美食网站模板
07-13
HTML5是一种先进的网页标记语言，它为网页设计者提供了更多的创新空间和功能支持。这个"html5宽屏大气响应式餐厅美食网站模板"是专为餐厅和美食领域设计的，旨在提供一个美观、用户友好的在线展示平台。下面将详细...
js获取网页高度(详细整理)
10-27
网页的全文宽和高则反映了整个网页的内容大小，包括不可见的部分，如在页面下方需要滚动才能看到的内容： - `document.body.scrollWidth`：返回网页正文的总宽度，即使这部分内容超出可视区域。 - `document.body....
HTML中宽度和高度,HTML5中的画布宽度和高度
weixin_29305313的博客
06-24 873
小编典典的canvasDOM元素具有.height和.width对应的属性的height="…"和width="…"属性。在JavaScript代码中将它们设置为数值，以调整画布的大小。例如：var canvas = document.getElementsByTagName('canvas')[0];canvas.width = 800;canvas.height = 600;请注意，这将清除...
屏幕 宽度和高度 java_[Java教程]HTML 获取屏幕、浏览器、页面的高度宽度
weixin_34940781的博客
02-23 347
[Java教程]HTML 获取屏幕、浏览器、页面的高度宽度0 2016-01-03 18:00:07本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。目录1. 介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。2. 屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。3. 浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具...
HTML 获取屏幕、浏览器、页面的高度宽度
weixin_34166472的博客
01-03 1245
　　本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。 目录 1. 介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。 2. 屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。 3. 浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。 4. 页面信息：介绍HTML页面尺寸信息；如：body总的、展示的高度和宽...
HTML5基础（height,width设置）
HandsomeLeft的博客
03-08 2167
对于html5，height和witch有4种可以设置的单位，分别是px，百分比，em，rem。并且他们都是相对的单位类型。 px是以你当前屏幕分辨率和电脑缩放比例为基准 当你的分辨率保持不变，更改电脑的缩放比例，你会发现相应的height和width也会发生改变。 百分比是以当前标签的父标签的 ...
h5几种宽高的获取
雨觴舒成的博客
04-23 2662
获取元素宽高数值的API clientWidth clientHeight width + padding offsetWidth offsetHeight width + padding + border scrollWidth scrollHeight 盒子总共占的高 绝对高 ...
H5手机端JS常用屏幕宽度和高度获取方法
hotlinhao的专栏
07-10 6544
js获取手机屏幕宽度、高度 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.
css 怎么获取 文字fongt-size对应的宽高
06-01
您可以使用JavaScript的Canvas API来获取文本的宽度和高度，具体步骤如下： 1. 创建一个Canvas元素，并把它添加到页面上。 ```html <canvas id="myCanvas"></canvas> ``` 2. 获取Canvas元素的上下文对象。 ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值