Como tornar um site “sensível ao telefone”? [fechadas]

Question

Então aqui está o acordo; Eu tenho um site totalmente codificado nas versões de desktop e telefone, mas eu não sei como fazer o site saber que o dispositivo que visita o site é um computador desktop ou um dispositivo móvel, então Ele carrega qualquer versão do site de acordo. Como eu posso fazer isso? Eu ainda sou praticamente um novato em desenvolvimento web, então eu não sei.

Obrigado antecipadamente.

    

Answer 1

Você afirma que está usando o Bootstrap para construir seu site, por isso você não deve ter duas versões. Você constrói uma única versão e, em seguida, especifica os elementos a serem mostrados em vários tamanhos de tela com classes CSS.

A documentação do Bootstrap sobre como usar o sistema de grade é útil nesse caso.

Para testar o site, você pode reduzir o tamanho do navegador e os elementos serão reordenados, redimensionados ou desaparecerão dependendo dos pontos de interrupção definidos ou você pode usar um serviço como BrowserStack que emula vários navegadores.

    

Answer 2

Esta solução não requer JavaScript e funciona muito bem com desktops, tablets e smartphones. Você terá um único arquivo para cada página facilitando as alterações, atualizações, etc.

Antes de mais nada, você precisará disso na seção head em cada arquivo html :

<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

Em seguida, no arquivo CSS, você pode criar um design responsivo capaz de se adaptar a diferentes tamanhos de tela. Por exemplo, no seu arquivo css você define:

body {
    font-family: 'Arial', sans-serif;
    font-size:1em;
    color: #636770;
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url("/images/bg.png");
    background-repeat: repeat;
}

#top {
    display:block;
    width:100%;
    margin-top:40px;
    height: 147px;
    position: static;
}

@media (max-width:800px){


    #top {
        display:block;
        width:100%;
        margin-top:5px;
        position: static;
    }
}

Neste exemplo, definimos body como um elemento geral com as mesmas propriedades para cada tamanho de tela, mas #top é definido de forma que a área de trabalho tenha uma margem superior de 40 px e quando o < em> largura da tela está abaixo de 800px a margem superior é 5px.