可以禁用@media查询或强制解决？原因:允许iPhone看到桌面网站？

Question

我通过@media查询修改了我的网站HEAVILY,以便在手机上显示非常简洁.但是,我的用户要求提供该网站的桌面版本(可通过链接获得).

更进一步,桌面网站本身也会被@media查询修改,具体取决于分辨率.我在考虑选择一个"桌面"分辨率,比如1440x900并强制手机以该分辨率显示？

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

谢谢!

Answer 1

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

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

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

希望这可以帮助 :)

这个答案可能对那些试图在移动设备上强制使用桌面网站的开发人员(如问题要求)有所帮助,但却无法相反(在桌面上强制移动设备,甚至桌面设备上的桌面设备).这是因为桌面浏览器不尊重<meta name ="viewport">标记,它只能由移动浏览器看到.对于这种情况,Romo的解决方案更好. (12认同)
我根本无法完成这项工作.你能解释一下吗？这是我正在尝试此解决方案的演示.http://plnkr.co/edit/qWEImTg5VB63BD1EL4FW?p=preview单击此按钮可将视口宽度更改为1000,文本应更改. (4认同)

Answer 2

我将一个类添加到您的<html>或<body>等class="force-desktop",然后在你的媒体选择添加

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

或类似的东西

Answer 3

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

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