Mobile version bootstrap

[remove]

I need some advice about the following.

Because the mobile version of my website is different from the desktop version it needs its own code. I'm using the visible-xs, hidden-xs in my basic-template. Does anybody have any ideas or got a better solution?

<?php include('./head.inc'); ?>

<div class="hidden-xs">
Code main website
</div>

<div class="visible-xs">
<?php include('./mobile.inc'); ?>
</div>

<?php include('./footer.inc'); ?>

[horst]

cannot really follow. Do you want to send both versions _everytime_ for every request, (also to mobiles with possible low bandwith) and want to hide maybe 50-70 percentage of the transmitted content?

Why do you not serve two different versions with different (base) URL or (sub)domain? And simply let the user decide which one he uses, like here in the IP.board. (with mobile you have a link on every page: [use full version] or [use mobile version])

Or use a UA-sniffer of your trust and send one version. https://processwire.com/talk/topic/6354-server-side-mobile-detection-with-caching/#entry62205

[OrganizedFellow]

@toothpaste

There are various ways to detect a mobile device.

Here is one I've used in the past: http://mobiledetect.net/

With that you can output any template you want. Super easy way to target only smaller devices.

[OrganizedFellow]

I FOUND IT:

https://processwire.com/talk/topic/2956-two-domains-same-content-two-sets-of-templates/?p=29139

if($_SERVER['SERVER_NAME'] == 'm.exampledomain.com'){
    include('yourmobile_tpl.php');
} else {
    include('yourdesktop_tpl.php');
}

[remove]

@ OrganizedFellow: Thx for this link!

I like the script but is it possible to include a file based on screen width (@mediaonlyscreenand(max-width:767px)?

[Joss]

You can include a file two ways.

With CSS you can simply have a div that includes various markup and use display: none for media quieries where you don't want to see it.

However, you can also use some ajax and load a page using jquery. So you would do something like:

var $window = $(window);
      function checkWidth() {
          var viewportWidth = $window.width();

          if(viewportWidth >= 1290) {

             load a page with ajax here

             } else {

             Load the same page with a different template here etc

          }
      }
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

So you can have a separate template for mobile layout and load that one or another depending on the viewport width. 

Warning: I am not a coder, so you will need to double check how to do this properly!