html - pagina - medidas web responsive 2018

Cambiar el diseño del sitio web para dispositivos móviles o cambiar el tamaño del navegador

Question

Lo siento si esto se ha preguntado antes, estoy seguro de que debe haber una respuesta para esto, pero por alguna razón no puedo encontrarlo, probablemente usando una consulta de búsqueda incorrecta.

Sé que puede usar las consultas de medios para orientar los diferentes dispositivos de la siguiente manera:

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

Pero lo que me gustaría saber es cómo cambiar el diseño de mi sitio web en función del dispositivo en el que se visualiza.

Ejemplo

Digamos que la estructura de mi sitio normal es la siguiente:

si el escritorio

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

Ahora cuando el usuario ve mi sitio en un dispositivo móvil, ¿cómo puedo cambiar el diseño de mi div / sitio ?, digamos algo diferente como este

si dispositivo móvil

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

Espero que lo que pido tenga sentido, gracias a todos en este sitio increíble para ayudar

Answer 1

Puedes usar este módulo

Para detectar un dispositivo móvil como un teléfono o una tableta, puede usar este código.

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

Answer 2

Si quieres hacer esto con JavaScript puro, aquí está-

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

Nuevamente puedes hacer esto con jquery-

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

Si quieres hacer esto con PHP, echa un vistazo a este artículo

Answer 3

Normalmente hago esto en mis proyectos. Preparo el contenido de manera predeterminada, pero está configurado para mostrar: ninguno, cuando la consulta de medios detecta el ancho del dispositivo móvil, mostrará el contenido apropiado para el dispositivo.

Modo CSS Query 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;}
    }

Tenga en cuenta que su página puede tardar mucho en cargarse. solo limite lo que necesita cambiar y sea específico.