Question

I’m having a problem with a Responsive Layout.

The layout has to include the same php file on different places depending on browser width.

display:none; still loads the content and possibly breaks code within said file.

<div id="more_than_960">
    <?php require "content.php";?>
</div>

<div id="less_than_960">
    <?php require "content.php";?>
</div>

Is there a better way in achieving the goal?

The problem isn’t to hide the content, but to exclude it from the loading process.

---

To anyone else having this problem. Here’s a great solution provided my Markus:

https://github.com/serbanghita/Mobile-Detect

Answer 1

You shouldn’t do responsive on the server side, you should do it on the client side, using @media queries and where necessary javascript. So you would have something like:

@media (min-width:960px) {
    .somestuff {
        display: none;
}

etc.

So you need to change your approach a bit. Make content which degrades well instead of inserting duplicated content.

If you really need to do part of this on the server side, you probably don’t want to ask for width but directly detect a certain group of devices with a library like this https://github.com/serbanghita/Mobile-Detect.

Furthermore, you probably want to separate your markup from your content.

include 'Mobile_Detect.php';
$detect = new Mobile_Detect();

if ($detect->isMobile()) {
    $markup = 'your markup';
}
else if ($detect->isTablet()) {
    $markup = 'your alternative markup';
}