Question

我正在使用PHP来确定用户是在移动设备还是桌面浏览器上。现在我的声明设置为回答“是”或“否”。这些都正常运作。但是，如果设备是移动的，我想添加某些CSS代码，如果不是，我想添加某些CSS代码。这可能吗？

以下是一个例子：

$ismobile = check_user_agent('mobile');
if($ismobile) {
    <div id="slider1">
         Sample Text
        </div>

} else {
    <div id="slide2">
        Sample Text 2
        </div>

谢谢！

Answer 1

$ismobile = check_user_agent('mobile');
if($ismobile) {
    ?><link rel="stylesheet" type="text/css" href="mobile.css">
<?php
} else {
    ?><link rel="stylesheet" type="text/css" href="desktop.css">
<?php
}

Answer 2

是的，就像回显“是”和“否”一样，您可以在HTML样式标记内回显CSS样式，或者更好的是加载CSS文件（<link rel="stylesheet" type="text/css" href="mystyle.css">）。

Answer 3

你可以像<body class="mobile">一样在你的身上放一个课程然后使用css专门定位移动设备

.mobile #mydiv {background:red}

Answer 4

有几种方法可以做到这一点。我首先会研究媒体查询，因为它是一个更简洁的解决方案，意味着你不需要混合使用php。

然而，快速的方法是

    <?php
    $ismobile = check_user_agent('mobile');
    if($ismobile) {?>
        <div id="slider1"> Sample Text</div>
    <?php } else { ?>
        <div id="slide2">Sample Text 2</div>
<?php } ?>

Answer 5

您可以添加两个不同的样式表：

<link rel="stylesheet" type="text/css" href="<?php echo check_user_agent('mobile') ? 'mobile' : 'desktop'; ?>.css">

或者只是在body标签中添加一个类：

<body class="<?php echo check_user_agent('mobile') ? 'mobile' : ''; ?> another-body-class">

但是你真的应该使用CSS Media queries，它使屏幕分辨率的外观不是用户代理屏幕。

Answer 6

$ismobile = check_user_agent('mobile');
$style = $ismobile ? 'mobile' : 'notmobile';

echo '<div id="slider1" class='.$style.'>
   Sample Text
</div>';

Answer 7

虽然其他回复有效，但我喜欢修改代码，所以我会把它贴在2行上并完成它。

$ismobile = check_user_agent('mobile') ? 'mobile' : 'main' ;
echo '<link rel="stylesheet" type="text/css" href="' . $ismobile . '.css">';

背后的逻辑很简单。您有2个样式表，主模板名为main.css，而mobile.css适用于移动布局。

考虑到这一点，$ ismobile总是返回true或false，以mobile.css或main.css结尾，具体取决于返回值。

由于您将始终捕获其中一个（真或假），因此您将始终拥有所包含样式表的值。

最终结果是你有2个样式表，需要有2个div，它们在html级别复制了代码，因为#slider可以用每个属性的2个独立的属性来定义，这意味着＃slide2 isn'需要。

在PHP if语句中插入CSS

7 个答案: