gpt4 book ai didi

javascript - 如何通过js控制屏幕宽度?

转载 作者:行者123 更新时间:2023-11-30 12:31:15 24 4
gpt4 key购买 nike

我将尝试在这里解释我的用例。在我的站点中,我有一个桌面 View 断点和平板 View 断点(更紧凑)。我正在尝试添加一项功能,以允许在从桌面浏览时看到平板电脑 View ,因为一些成员也喜欢桌面上的紧凑设计。

为此,我想我需要欺骗“@media(max-width:X)”查询。我正在寻找可以操纵屏幕宽度值的 JS 代码,因此当浏览器计算最大宽度时,它会与我指定的值不符。

需要注意的一点是,这应该适用于桌面浏览器,因此元视口(viewport)不能在此处使用。

最佳答案

一种解决方案是将特定类(例如:.tablet)应用到正文。

<body class="tablet"></body>

在你的 CSS 中:

@media screen and (/* your query */) {
.tablet .my-class {
/* tablet specific stuff */
}
}

然后您可以删除 .tablet 类并通过 JavaScript 将其替换为 .desktop

var body = document.body;

var switchToDesktop = function() {
body.className = body.className.replace('tablet', 'desktop');
}

var switchToTablet = function() {
body.className = body.className.replace('desktop', 'tablet');
}

var toggleView = function() {
(body.className.indexOf("tablet") > -1) ?
switchToDesktop() :
switchToTablet();
}

如果您使用的是 SASSLESS,您可以嵌套特定于平板电脑的样式。

@media screen and (/* your query */) {
.tablet {
h1 {
/* tablet specific h1 */
}
.my-div {
color: red;
}
/* etc... */
}
}

关于javascript - 如何通过js控制屏幕宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27639117/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com