Question

我创建了一个网页，使用媒体查询来选择特定的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。

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

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

Answer 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。

它帮助了我。希望这能帮助你。

CSS移动版本切换回桌面

1 个答案: