Change website design for mobile devices or change browser size

Question

I am sorry if this was asked before I return somewhere, there should be an answer for this, but for one reason or another I cannot find it, perhaps using the wrong search query

I know that you can use media queries to target different devices:

@media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }
}

But I would like to know how to change the design of websites based on the device on which it is viewed?

Example

Suppose my normal site structure is as follows:

if the desktop

<div id="user">
    <div id="profilePic">
        <img src="images/responSiveTest/ppic.PNG" class="p-img" />
    </div>
    <div id="uname">
        <h4 style="color:white">Welcome  Guest</h4>
        <p style="color:white">Please Log in</p>
    </div>
</div>

Now, when a user browses my site on a mobile device, how can I change my layout div/ site, let's say something similar to this

if mobile device

<div id="mobileNav">
    <div id="namePic">
        <!-- Mobile user -->
    </div>
</div>

Hope they make sense, thanks to everyone on this amazing site that helps

Answer 1

. , : none, , .

CSS Media

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

, . , .

Answer 2

JavaScript, -

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

jquery -

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

PHP,

Answer 3

To detect a mobile device, such as a 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');