Insert CSS in PHP if statement

Question

I am using PHP to determine if a user is on a mobile device or desktop browser. Right now I have the statement set to echo a "yes" or "no." Those are both functioning correctly. However, I want to add certain CSS code if the device is mobile and certain CSS code if it is not. Is this possible?

Here is an example:

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

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

Thanks!

just add <link rel="stylesheet" href="...." /> in the document head, using the same PHP if() structure. — Marc B
– Marc B, Commented Oct 21, 2013 at 16:14
#slider1 { background-color: red; } #slide2 { background-color: blue; }?? — h2ooooooo
– h2ooooooo, Commented Oct 21, 2013 at 16:14
The best way to deal with this issue is to use css media query instead of a mobile detection (same website for every devices). However, you can create two separate css files, that you can load with a condition. Otherwise, just add desktop + mobile css inside the same file it will work fine. — Romain
– Romain, Commented Oct 21, 2013 at 16:45

Justin Lessard · Accepted Answer · 2013-10-21 16:17:37Z

4

$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
}

edited Oct 21, 2013 at 16:17

answered Oct 21, 2013 at 16:15

Justin Lessard

12.2k7 gold badges53 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shomz · Accepted Answer · 2013-10-21 16:14:38Z

1

Yes, just like you echo "yes" and "no", you can echo your CSS styles inside a HTML style tag, or, even better, load a CSS file (<link rel="stylesheet" type="text/css" href="mystyle.css">).

answered Oct 21, 2013 at 16:14

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

2 Comments

user2787747 Over a year ago

I like this answer and I think we can work from here. But I actually want to display a different div if it is mobile or a different div if it is a desktop browser. I don't think you can put a div in a stylesheet. Can you?

user2787747 Over a year ago

I figured this out on my own somehow (who has any idea how!) Regardless, I just needed to end my PHP tags and begin them again before and after my CSS code. Everything works perfectly now!

Tib · Accepted Answer · 2013-10-21 16:16:31Z

0

You can put a class on your body like <body class="mobile"> and then use css to target specifically the mobile or not

.mobile #mydiv {background:red}

answered Oct 21, 2013 at 16:16

Tib

2,6511 gold badge30 silver badges48 bronze badges

Comments

Dominic Green · Accepted Answer · 2013-10-21 16:16:48Z

0

There are a few ways of doing this. I would first look into media queries because it is a bit of a neater solution and means you dont need to mix in php.

However the quick way would be

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

answered Oct 21, 2013 at 16:16

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

Comments

iambriansreed · Accepted Answer · 2013-10-21 16:18:16Z

0

You could add two different style sheets:

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

Or just add a class to the body tag:

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

But you really should be using CSS Media queries which bases appearance off of screen resolution not the User Agent screen.

answered Oct 21, 2013 at 16:18

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

Comments

Wolfgang Blessen · Accepted Answer · 2013-10-21 16:18:25Z

0

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

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

answered Oct 21, 2013 at 16:18

Wolfgang Blessen

1,07814 silver badges34 bronze badges

Comments

MrMarlow · Accepted Answer · 2013-10-21 16:21:18Z

While the other replies work, I like to slimline code, so I'd stick it on 2 lines and be done with it.

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

The logic behind it is simple. You have 2 stylesheets, named main.css for the main template, while mobile.css is for the mobile layout.

With that in mind, $ismobile always returns true or false, ending in mobile.css or main.css, depending on return value.

As you will ALWAYS catch one of the 2 (true or false), you will always have a value for the included stylesheet.

The end result is that you have 2 stylesheets, rendering the need to have 2 divs, which duplicated the code at html level, since #slider can be defined with 2 separate sets of attributes in each, which means #slide2 isn't needed.

Collectives™ on Stack Overflow

Insert CSS in PHP if statement

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related