如何在实际视图网站上的移动视图和桌面切换到移动屏幕上的移动到桌面屏幕只需点击一下?

时间:2014-07-23 04:42:07

标签: jquery html css mobile

我想在手机屏幕网站上添加按钮,这样点击该按钮时,网站的实际视图将在手机屏幕上打开,反之亦然。

请帮帮我。 三江源

2 个答案:

答案 0 :(得分:0)

你可以使用查询字符串,然后像这样检查和切换黑白屏幕

www.example.com?mode=mobile

www.example.com?mode=desktop

然后

if(isset($_GET['mode']) && $_GET['mode']=='mobile')
{
  // perform action for mobile view
}
if(isset($_GET['mode']) && $_GET['mode']=='desktop')
{
  // perform action for desktop view
}

答案 1 :(得分:0)

视口元标记定义了如何在移动设备上显示布局。

你可能在头标记中有类似的内容:<meta name="viewport" content="initial-scale=1">

现在假设您有一个这样的锚标记:<a href="#" id="switch_layout">Switch layout</a>

然后,您可以使用以下脚本在移动设备上切换布局。

$("#switch_layout").click(function (e){
    e.preventDefault();
    if($(this).hasClass('desktop')){
        $('meta[name="viewport"]').attr('content', 'initial-scale=1');
        $(this).toggleClass('desktop');
    }else{
        $('meta[name="viewport"]').attr('content', 'initial-scale=0');
        $(this).toggleClass('desktop');
    }
});

注意:这只适用于移动设备&amp;不在桌面上。

代码说明:

  • 我们首先使用id switch_layout监听锚标记上的点击事件。
  • 停止锚点默认功能,由于href =&#34;#&#34;我使用了e.preventDefault()。
  • 我正在使用桌面类打开和关闭移动布局,虽然这也可以通过变量完成,但应用类意味着css可以利用它。