Javascript 如何通过js操作屏幕宽度？_Javascript_Jquery_Css_Responsive Design_Viewport

Javascript 如何通过js操作屏幕宽度？

javascript jquery css responsive-design

Javascript 如何通过js操作屏幕宽度？,javascript,jquery,css,responsive-design,viewport,Javascript,Jquery,Css,Responsive Design,Viewport,我将尝试在这里解释我的用例。在我的站点中，我有一个用于桌面视图的断点，还有一个用于平板电脑视图的断点（更紧凑）。我正在尝试添加一个功能，允许在从桌面浏览时查看平板电脑视图，因为一些成员也喜欢桌面的紧凑设计为此，我想我需要欺骗“@media（max-width:X）”查询。我正在寻找一个可以操纵屏幕宽度值的JS代码，因此当浏览器计算最大宽度时，它将与我指定的值相对应需要注意的一点是，这假设在桌面浏览器上工作，因此这里不能使用元视口。一个解决方案是将特定类（例如：.tablet）应用于主体 &l

我将尝试在这里解释我的用例。在我的站点中，我有一个用于桌面视图的断点，还有一个用于平板电脑视图的断点（更紧凑）。我正在尝试添加一个功能，允许在从桌面浏览时查看平板电脑视图，因为一些成员也喜欢桌面的紧凑设计

为此，我想我需要欺骗“@media（max-width:X）”查询。我正在寻找一个可以操纵屏幕宽度值的JS代码，因此当浏览器计算最大宽度时，它将与我指定的值相对应

需要注意的一点是，这假设在桌面浏览器上工作，因此这里不能使用元视口。

一个解决方案是将特定类（例如：

.tablet

）应用于主体

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

然后可以删除

.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();
}

如果使用的是SASS或LESS，则可以嵌套特定于平板电脑的样式

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

屏幕宽度是实际查看硬件的宽度。你不能用JavaScript改变这一点。用户当然可以手动重新调整浏览器窗口的大小，或者使用Firefox

CTRL-SHIFT-M

功能。一种解决方案是：将class

tablet

或

desktop

添加到

body

标签中。使用子类为元素设置不同的样式。然后您可以使用JS操作这些类。我还没试过这个，有什么用呢？它是用于测试还是用于生产使用（客户/访客应使用此功能）？网站成员应使用它

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