可以禁用@media 查询或强制解决吗?原因:允许iphone查看桌面站点?

IT技术 javascript html css media-queries
2021-03-06 22:37:18

我通过@media 查询对我的网站进行了大量修改,以便在手机上显示非常精简。但是,我的用户要求使用该站点的桌面版本(可通过链接获得)。

更进一步,桌面站点本身也会根据分辨率通过@media 查询进行修改。我正在考虑选择一个“桌面”分辨率,比如 1440x900 并强制手机以该分辨率显示?

这可能吗,也许是通过 JavaScript?或者,可以完全禁用这些@media 查询吗?

谢谢!

4个回答

我和一个客户有同样的问题。但问题是有 120 多个 CSS 文件包含媒体查询。所以我所做的是,设置视口宽度。我在那个网站上使用了这个片段并且工作正常。使用它,您甚至可以为用户提供在响应式设计和非响应式设计之间切换的选项。

$(document).ready(function(){
   $('meta[name="viewport"]').prop('content', 'width=1440');
});

注意:1440 是您首选的屏幕宽度。

希望这可以帮助 :)

非常有用的评论@patr1ck。我认为,这个问题需要修改这个问题。
2021-04-27 22:37:18
这个答案可能对那些试图在移动设备上强制使用桌面站点(如问题所问)但反过来不起作用(强制在桌面上使用移动设备,甚至在桌面上使用桌面设备)的开发人员有所帮助。这是因为桌面浏览器不尊重 <meta name="viewport"> 标签,它只能被移动浏览器看到。对于这种情况,Romo 的解决方案更好。
2021-04-28 22:37:18
我根本无法完成这项工作。你能解释更多吗?这是我尝试使用此解决方案的演示。plnkr.co/edit/qWEImTg5VB63BD1EL4FW?p=preview单击该按钮将视口宽度更改为 1000,文本应更改。
2021-05-04 22:37:18
我喜欢这个。我使用 SASS 并且我的样式到处都是零散的,而且手机上的人不太可能关闭 JS,所以这应该很可爱。
2021-05-06 22:37:18
@rtindru 您必须将“桌面浏览器”切换为“移动视图”
2021-05-12 22:37:18

我会添加一个类到您的<html><body>诸如class="force-desktop",然后在您的媒体选择器上添加

@media () {
    body:not(.force-desktop) {
        //styles
    }
}

或类似的东西

👆这将是如何在 IE10+11 中处理此问题,因为它们不支持 :not()
2021-04-23 22:37:18
使用 romo 的答案,您也可以反过来。您可以向正文添加一个类,例如“响应式”。然后,在媒体查询中,使用“body.responsive.YourSelector”(如果它在主体上)或“body.responsive YourSelector”(使用空格而不是句点,主体的后代)。然后您可以通过删除正文中的“响应”类来禁用所有媒体查询。
2021-04-25 22:37:18
不确定你的意思,但这是一个旧的答案。你仍然可以为特定的风格.force-mobilebody.force-mobile
2021-04-29 22:37:18
@romo 你怎么能做同样的事情,但对于强制移动?因为桌面将被应用,但移动仅在媒体查询命中时应用,但我想用类名命中移动视图force-mobile
2021-05-06 22:37:18

没有 JQuery 的 IJas 的解决方案如下所示:

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);

将任何可能需要禁用的样式放在它们自己的样式表中是最容易的,使用标题属性可以更容易地找到它们。它们可以是内联样式或链接元素到 .css 文件。

function toggleSheet(title){
  var S=document.styleSheets, L=S.length, temp;
  while(L){
    temp=S[--L];
    if(temp.title===title){
    temp.disabled=!temp.disabled;
    return temp;
  }  
}