Como posso tratar a aba * one * no navegador de desktop como móvel?

Question

Eu quero ser capaz de executar duas guias do mesmo site, no mesmo navegador, ao mesmo tempo . A primeira guia deve agir normalmente e receber versões da área de trabalho. A segunda guia seria tratada como um navegador para dispositivos móveis e receberia versões para dispositivos móveis.

Como posso fazer isso?

Editar

Aparentemente eu fiz um trabalho ruim perguntando. Eu quero saber como posso ter uma única janela do navegador com duas guias. A primeira guia usa a versão para desktop, a segunda usa a versão para celular. Espero que a imagem abaixo possa ajudar a ilustrar.

    

Answer 1

O Firefox não pode fazer isso facilmente sem usar um plugin como o Firebug. Se você não está preso ao Firefox, isso é feito com facilidade no Chrome usando as ferramentas do desenvolvedor. Eles incluem uma guia Emulador que permite selecionar um dispositivo (celular ou tablet) para emular. Não é uma representação perfeita, mas fará com que o site acredite que você é o dispositivo emulado.

    

Answer 2

O Firefox oferece o recurso Responsive Design View para ver como os sites são exibidos em diferentes dispositivos com tela, como celulares e tablets.
Consulte o guia para desenvolvedores do Firefox Exibição de design responsivo

Para ativar a Visualização de Design Resumido, use Ctrl + Deslocamento + M

    

Answer 3

Eu provavelmente veria os alternadores do UserAgent, possivelmente este Dependendo de como o site detecta "Celular", talvez seja necessário alterar outros cabeçalhos de solicitação de cliente, talvez o cabeçalho do tamanho da tela.

Você pode querer verificar a string do agente do usuário do seu navegador para dispositivos móveis, para poder cloná-lo com eficiência.

Uma advertência de que pode haver suposições para dispositivos móveis, como a de que você está em uma tela pequena no celular, e ficará horrível em uma tela de tamanho de área de trabalho. Experimente, deixe-nos saber:).

    

Answer 4

Isso depende inteiramente de como você separou o conteúdo da área de trabalho do conteúdo móvel no lado do servidor.

• Você está usando www.example.com e mobile.example.com ?
• Você está usando consultas de mídia dentro do seu CSS?
• Você está simplesmente carregando style.css e mobile.style.css condicionalmente?