Change website design for mobile devices or browser resize

Question

Im sorry if this has been asked before im sure somewhere there must be an answer for this but for some or other reason I cant find it, probably using wrong search query

Answer 1

If you want to do this with pure JavaScript, here it is-

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code.. 
}

Again you can do this with jquery-

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

If you want to do this with PHP the check out this article

Answer 2

You can use this module

To detect a mobile device such as phone or tablet you can use this code.

require_once '../Mobile_Detect.php';
$detect = new Mobile_Detect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');

Answer 3

I usually do this in my projects. I prepare content by default but its set to display: none, when media query detects the mobile device width it will render appropriate content for the device.

with CSS Media Query

HTML

<div id="content">
    <div class="desktop">
        <!--
            some content and markups here. by default this is loaded in desktop
        -->
    </div>

    <div class="mobile_device_380px">
        <!-- content and some markups for mobile -->
    </div>

    <div class="mobile_device_480px">
        <!-- content and some markups for mobile -->
    </div>
</div>

CSS

  /* if desktop */
    .mobile_device_380px {
        display: none;
    }
    .mobile_device_480px {
        display: none;
    }


    /* if mobile device max width 380px */
    @media only screen and (max-device-width: 380px) {
        .mobile_device_380px{display: block;}       
        .desktop {display: none;}
    } 

    /* if mobile device max width 480px */
    @media only screen and (max-device-width: 480px) {
       .mobile_device_480px{display: block;}
       .desktop {display: none;}
    }

Take note your page might take long to load. just limit what you need to change and be specific.