个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我是 JavaScript 的新手，想制作一个简单的“hello world”程序，根据屏幕宽度更改文本。如果窗口(索引文件)的宽度为 400 像素或更多，则显示文本，如果窗口更小，则 400 像素显示其他文本。我不知道为什么我的代码不起作用。有人可以向我解释一下吗，在此先感谢
这是我的代码(HTML 和 JavaScript)
HTML =
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavascriptResponsive</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world </h1>
<script src="Morris.js"></script>
</body>
</html>
JavaScript =
var currentWidth = window.innerWidth;
if (currentWidth > 400) {
document.write(" <h1>Hello big world </h1>");
}
else if (currentWidth < 400) {
document.write( "<h1>Hello small world </h1>");
}
最佳答案
当 JavaScript 代码运行时，变量不会不断更新和运行。所以你需要编写代码来检测事情何时发生变化。所以你需要监听 resize 事件。所以你绑定(bind)了一个事件监听器，你可以重新运行代码。您也不能在页面加载后使用 document.write 输出消息，因为它会删除所有页面内容。所以你想更新 DOM。
function updateMessage() {
var currentWidth = window.innerWidth;
var message = "Hello small world";
if (currentWidth > 400) {
message = "Hello big world";
}
document.getElementById("msg").innerHTML = message
}
window.addEventListener("load", updateMessage)
window.addEventListener("resize", updateMessage)<h1 id="msg">Hello world </h1>关于JavaScript window.innerwidth 不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59183979/
25
4
0
这个问题已经有答案了: HTML5 Canvas 100% Width Height of Viewport? (7 个回答) 已关闭 5 年前。 在使用 window.innerWidth 和 wi
我正在探索 JavaScript 中的内置对象，并编写了以下内容以查看它们在 Chrome 中的返回值。 console.log(window.innerWidth); console.log(win
我正在尝试使用 jQuery UI slider 小部件创建一个图像库。我的代码要求我找到无序列表的内部宽度。在 Firefox、IE 和 Opera 中，我得到的值为 2193px，但在 Chrom
我在下面有一段代码，它试图通过设备的 innerWidth 来确定某人是从移动设备还是台式机访问我的网站。但是，当我尝试从我的手机获取 innerWidth 时，它显示我的手机宽度是 980px？不过
var x = window.innerWidth; if (window.innerWidth CoffeeTea WaterMilk 我的宽度是 1366px 但上面的代码执行并将 li
我需要以像素为单位获取三星 Galaxy S10 设备的 innerWidth，我尝试使用谷歌搜索 - 但没有帮助。如何根据制造商的数据计算设备的宽度？如果您知道 Galaxy S10 的像素宽度，我
我正在开发一个简单的聚合物 Dart 应用程序，并且有一个包含图像标签的聚合物标签 宽度设置为100％，以便在用户调整浏览器大小时调整图像大小。 我会定期更改{{i
正在关注 var w = (window.innerWidth - 100px); 不工作。 有人可以告诉我它是如何工作的吗？ 最佳答案 .innerWidth 返回一个以像素为单位的数字，因此您只需
我正在构建一个响应式网站，但不想只是隐藏较小屏幕的元素，我想完全删除它们以减少加载时间。 到目前为止我已经完成了这个工作 if (window.innerWidth < 768) { $('.
我是 JavaScript 的新手，想制作一个简单的“hello world”程序，根据屏幕宽度更改文本。如果窗口(索引文件)的宽度为 400 像素或更多，则显示文本，如果窗口更小，则 400 像素显
我正在尝试更改元素的宽度。 脚本成功获取屏幕宽度... let x = window.innerWidth || e.clientWidth || g.clientWidth; ...然后减半...
我有一个根据屏幕大小显示不同内容的脚本，它看起来像这样: if ((window.innerWidth 750)) { //Do something } 谁能帮帮我？ 最佳答案 当使用 bool
这个问题在这里已经有了答案: How to get the browser viewport dimensions? (17 个答案) 关闭 8 年前。 我正在尝试计算视口(viewport)的宽度
当我实时调整浏览器大小时，我需要获取浏览器的宽度。到目前为止，我已经找到了一个给出宽度但不是实时的解决方案。该值仅在我刷新网页后更新。我如何在调整浏览器大小时获取值。 我的方法 render() {
我正在使用 bootstrap 编写一个响应式网站，我只想要一个与屏幕实际大小相同的元素。 每当我执行 height/width: 100% 时，浏览器都会给我一个滚动条，因为它会将我的视口(view
我试图让下拉菜单在屏幕尺寸小于 500 像素时显示。稍后，我将删除导航栏，以便此菜单在小型设备上取而代之。 我觉得代码不错，警报确实触发了，但菜单没有显示。 TLDR:需要在屏幕尺寸小于 500px
if(window.innerWidth) { return window.innerWidth; } return $(window).width(); 我正在使用上面的代码来查找网页的可用
当我运行代码时: public onResize(event: Event) { console.log(event.target.innerWidth); //--solution-
我正在为动画制作 Canvas 网页。奇怪的是，每次我通过双击 html 文件启动网页时， Canvas 几乎总是大小不正确。我之前发过类似的问题:Canvas sizing incorrectly
我有两个独立的组件，一个用于移动设备，另一个用于桌面。一次只能显示一个组件，具体取决于用户浏览器窗口的宽度。这是我的浓缩版: let innerWidth Inner Width:
我是一名优秀的程序员,十分优秀！