个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想了解 documentElement.clientWidth和 window.innerWidth以及它们在各种设备上的行为。我用这个http://67.20.67.232/test.html要测试的页面，令我困惑的一件事是在我的 Nexus 6 documentElement.clientWidth 上是980，我用开发工具的手机模拟试了一下，结果是一样的。那为什么是980？而且，在移动设备上，可以window.innerWidth被认为是视口(viewport)宽度？页面的 HTML 如下:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
(function loop(){
requestAnimationFrame(function(){
$('#doc').html( document.documentElement.clientWidth );
$('#win').html( window.innerWidth );
$('#d1').html($('#w div:eq(0)').width());
$('#d2').html($('#w div:eq(2)').width());
loop();
})
})();
</script>
</head>
<body>
<div id="w" style="margin-top:50px;margin-left:50px;font-size:50px">
<div style="float:left">client:<span id="doc"></span></div>
<div style="clear:both"></div>
<div style="float:left">window:<span id="win"></span></div>
<div style="clear:both"></div>
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
最佳答案
在 head 部分中包含 viewport 元标记:
<meta name="viewport" content="width=device-width, initial-scale=1">
关于responsive-design - 为什么手机上的document.documentElement.clientWidth是980px，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31767904/
25
4
0
通过一个demo测试这三个属性的差别。 说明： scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 clientWidth：对象内容的可视区的宽度，不
我无法返回元素的宽度值。 let dimensionPopup1 = popup.getElementsByTagName("img"); console.log(dimensionPopup1.cl
textMuchLongerThan50[ document.getElementById("theElement").clientWidth 总是返回 50，这是父元素的宽度，但很明显元素的
我试图使用以下代码获取 angularJs 中“th”元素的 clientWidth: var cols = this._element.find("th"); angular.forEach(col
属性 document.body.clientHeight 和 document.body.clientWidth 在 IE7、IE8 和 Firefox 上返回不同的值: IE 8: documen
我想要一种在多个浏览器之间获取可用窗口大小的方法，无需使用 jQuery/Mootools/任何第三方库依赖项。我对此做了一些研究，但我遇到的一半事情都在谈论 Netscape Navigator..
在我的代码中有一行: var contentWidth = angular.element(document.querySelector('.content'))[0].clientWidth; 运行
我正在尝试获取 svg 元素的 clientWidth 和 clientHeight。基于本教程https://bl.ocks.org/curran/3a68b0c81991e2e94b19 ，我对我
调整窗口大小时出现错误“无法读取 null 的属性‘clientWidth’”。我想，这是因为，我得到 ref null。知道我该如何解决它吗？ import React, { useRef, use
我有一个导航栏，它会在某个断点后变成一个带有滑动切换功能的按钮，我有一段 jquery 可以处理它。在该移动布局中，它还会在单击某个元素后使切换的导航滑动返回。 jQuery(document).re
我正在根据当前视口(viewport)大小在 JavaScript 中调整图像大小。没有媒体查询和其他类似的东西，全程使用 JS，也没有元素的静态大小。 所以基本上它看起来像这样: var c
注意:尽管有标题，但这个问题不包含 JavaScript，我只是使用这些术语来说明问题。 我有一个固定宽度的 div，有时里面的内容太宽，所以我将它设置为 overflow: auto，这样就可以正常
我将 .circle 的高度和宽度都设置为 80px。然而，一些浏览器和设备将高度设置为其他值。对于这个例子，我特意将高度和宽度设置为不同的值。我想要做的是获取 clientHeight 和 clie
这个问题在这里已经有了答案: CSS media queries and jQuery window .width() do not match (8 个答案) 关闭 6 年前。
好的。因此，要获得 clientWidth，您必须添加代码 #menuSystem a{ position: absolute; height: auto; width: auto; font-siz
我有一些遗留的 javascript 可以卡住表格的 tfoot/thead 并让主体滚动，它工作正常，除了在 IE8 中它非常慢。 我将问题追溯到读取 tfoot/thead 中单元格的 clien
StackOverflow 上有几个关于 offsetWidth/clientWidth/scrollWidth (和 -Height 分别)的问题，但没有一个全面解释这些值是什么。 此外，网络上有几
width 、 naturalWidth 和 clientWidth 之间有什么区别？ 最佳答案 读这个: Understanding offsetWidth, clientWidth, scroll
我有一个响应式 WordPress 主题。当屏幕尺寸低于 740 时，菜单被编码为隐藏。但是，它仅在主页上正确执行此操作。如果我转到任何其他页面，菜单会折叠但无法隐藏，并且出现此错误:“未捕获的类型错
要求图像应固定在我的页面的右下角。 我的代码:my_image.style.left =wrapper.clientWidth - my_image.clientWidth;在mozilla中完美运行
我是一名优秀的程序员,十分优秀！