CSS 移动版切换回桌面答案

【问题标题】：CSS Mobile version switching back to desktopCSS 移动版切换回桌面
【发布时间】：2014-06-16 15:01:07
【问题描述】：

我创建了一个网页，它使用媒体查询来选择特定的 css（一个用于移动版，一个用于桌面版）。

<link media="only screen and (max-width: 640px), only screen and (max-device-width: 640px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-width: 641px)" rel="stylesheet" type="text/css" href="medDesign.css" />

medDesign.css 将在桌面版上被选中，mobile.css 在移动版上将被选中。我也在使用：

<meta name='viewport' content='width=device-width,
initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'/>

我使用视口是为了使用移动 CSS 文件以正确的方式显示网站。

一切都很好，但现在我还需要用户在从移动设备浏览时可以选择切换到桌面视图。我没有设法这样做。因为我正在使用媒体查询，所以将选择的 css 非常绝对，我似乎无法通过用户选择来控制将显示什么 css。

附：当用户决定切换到桌面版本时，我还需要禁用视口，因为我不希望内容在设备的宽度上。

非常感谢您对此事的任何了解，我已经搜索了网络，但没有找到符合我要求的解决方案..

【问题讨论】：

设置cookie并更改页面输出服务器端。伪代码：if( !cookie.desktop ){ /* meta viewport, mobile <link> tags */ }.
感谢您的回答，是否有任何示例或代码片段可以帮助我使用服务器端？ .NET 会话可以取代 cookie 的使用吗？如何将媒体查询与服务器端结合起来？对不起，我真的很迷失在这里。

标签： jquery html css mobile media-queries

【解决方案1】：

在您的网页中添加以下代码行。

  <script>
   $(document).ready(function(){
        $('#selector').on('click',function(){
                    $('head').find('meta').each(function(index, element) {
                        if(this.name == "viewport")
                        {
                            $(this).removeAttr('content');
                            $(this).attr('content','initial-scale=0');
                        }
                    });

            });
      });

    </script>

将#selector 替换为您的选择器。

它帮助了我。希望对您有所帮助。

【讨论】：