Question

我正在使用PHP，XHTML strict和jQuery开发一个站点，它可以灵活地支持移动和桌面设备，使用Responsive Web Design方法并使用min-device-width属性提供不同的样式表。

<link rel="stylesheet" href="css/960.css" type="text/css" media="screen and (min-device-width: 480px)" />

但该网站需要有一个链接来切换“桌面”和“移动”视图。我有一个基本的想法，如何使用jQuery完成此操作，但更喜欢 php 中的解决方案，用于不支持JavaScript的设备。

Answer 1

PHP实现这一点并不困难。如果你要使用链接，就像这样......

<a href="?view=desktop">Desktop view</a>

然后在你的页面脚本......

//test for stylesheet parameter
if(isset($_GET['view']))
{
    //save and set it in the session
    $stylesheet = $_GET['view'];
    $_SESSION['stylesheet'] = $stylesheet;
}
elseif(isset($_SESSION['stylesheet']))
{
    //parameter not sent, so get it from the session
    $stylesheet = $_SESSION['stylesheet'];
}

稍后，您可以根据此$stylesheet变量选择样式表代码。

if($stylesheet == 'desktop')
{
    echo '<link rel="stylesheet" href="/css/desktop.css" type="text/css" />';
}
elseif($stylesheet == 'mobile')
{
    echo '<link rel="stylesheet" href="/css/mobile.css" type="text/css" />';
}
else
{
    echo'<link rel="stylesheet" href="css/960.css" type="text/css" media="screen and (min-device-width: 480px)" />';
}

Answer 2

那么，为什么不根据查询参数，会话变量或UA等包含相应的样式表呢？

//Code that figures out what type is 
$css  = '';
switch ($type) {
   case 'mobile':
       $css = '<link rel="stylesheet" href="css/960.css" type="text/css" />';
       break;

    case 'touch':
       $css = '<link rel="stylesheet" href="css/960-mobile.css" type="text/css" />';
       break;

    case 'desktop':
    default:
       $css = '<link rel="stylesheet" href="css/960-full.css" type="text/css" />';
       break;
}

在你看来

echo $css;

注意这只是一个例子。理想情况下，您不应该在PHP中构建整个链接html，但不知道任何实现细节，这就足够了。最好的方法是以标准方式命名CSS文件，最后只有-type来区分每个文件的使用位置，并将$type变量传递给视图。

这是你要找的吗？

Answer 3

您可以使用SESSION变量。以下示例假定有两个样式表mobile.css和desktop.css

测试参数，并设置会话。

 <?php
session_start();
    if(isset($_GET['style']))//Tests the argument
    {
     if($_GET['style']=="desktop")//This to prevent passing wrong arguments
     {
      $_SESSION['style']=$_GET['style'];
     }
    if($_GET['style']=="mobile")//This to prevent passing wrong arguments
     {
      $_SESSION['style']=$_GET['style'];
     }
    }

    ?>

<head>
blah
<?php
if(isset($_SESSION['style'])
{
 echo '<link rel="stylesheet" href="'.$_SESSION['style'].'.css" type="text/css" media="all" />';
}
?>
</head>

您从桌面切换到桌面CSS的链接。

<a href="?style=desktop">Desktop version</a>
<a href="?style=mobile">Mobile version</a>

如何使用链接交换样式表

3 个答案: