<!doctype html>
<?php
    //Here we include and initiate the Mobile Detect library
    require('detect/Mobile_Detect.php');
    $detect = new Mobile_Detect;
?>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="UTF-8" />
        <title>Responsive adaptive Template</title>

        <!-- stylesheet that include responsive rules -->
        <link href="styles.css" rel="stylesheet" media="all" />

        <!-- PHP code to check if we are on a mobile (touch) device. If yes, include jQuery Mobile -->
        <?php
            if($detect->isMobile()) {
                ?>
                <script href="js/jquery-mobile/jquery.mobile.custom.min.js"></script>
                <link href="css/jquery.mobile.custom.structure.min.css" rel="stylesheet" media="screen" />
                <link href="css/jquery.mobile.custom.theme.min.css" rel="stylesheet" media="screen" />
                <?php
            } 
        ?>
    </head>
    <body>
        <section>
            <h1>Responsive Adaptive HTML template</h1>
            <p>The source code of this file show how you can combine normalize.css, jquery mobile, responsive design via media queries and the PHP library Mobile Detect to form a PHP-file that can manage both responsive design and adaptions of code related to the device the HTML-file is displayed on.</p>
            <p><a href="responsive-adaptive-template.phps">View source code with PHP</a></p>
            <?php
                if($detect->isMobile()) {
                    //If we're on a mobile (smartphone or tablet) touch device
                    //we can include an HTML-file with adapted HTML for mobile.
                    include('mobile-page.html');
                    ?>
                    <!-- We can also escape PHP and write HTML directly in this file that's only displayed on mobile devices -->
                    <p>Writing HTML that will only be displayed on mobile devices.</p>
                    <?php
                } else {
                    //If we're not on a mobile (smartphone or tablet) touch device
                    //we can include an HTML-file with adapted HTML for larger screens.
                    include('screen-page.html');
                    ?>
                    <!-- We can also escape PHP and write HTML directly in this file that's only displayed on non-mobile devices -->
                    <p>Writing HTML that will only be displayed on non-mobile devices.</p>
                    <?php
                }
            ?>
            <div>
                <p>This <code>&lt;div&gt;</code> will show a different background color depending on what screen size it is displayed at. Check the <a href="styles.css" target="_blank">styles.css</a>-file to see the code.</p>
            </div>
        </section>
    </body>
</html>