Devo usar max-device-width ou max-width?

Com as consultas de mídia CSS, você pode usar max-device-width para segmentar uma largura de dispositivo (como um dispositivo iPhone ou Android) e / ou uma max-width que tenha como meta a largura de uma página.

Se você usar max-device-width , quando alterar o tamanho da janela do navegador na sua área de trabalho, o CSS não será alterado, porque a área de trabalho não muda de tamanho.

Se você usar max-width , ao alterar o tamanho da janela do navegador em sua área de trabalho, poderá ser exibido um estilo orientado para dispositivos móveis, como elementos e menus sensíveis ao toque e esse tipo de coisa.

Segmentar navegadores específicos (e dispositivos?) Agora está obsoleto e você deve ser um pouco mais agnóstico com o que você segmenta. Isso se aplica a consultas de mídia também?

Por que você teria como alvo um sobre o outro? Qual deles é o recomendado?

Este é um exemplo de uma consulta de mídia que uso em um site de produção:

 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc... */ } 

Eu costumo usar tanto max-device-width quanto max-width .

    TL; DR

    Se você estiver criando um website responsivo, provavelmente usará min-width / max-width vez de min-device-width / max-device-width para segmentar uma faixa maior de tamanhos de canvas.

    Lembre-se de especificar uma meta tag de viewport na seção do seu documento:

      

    Explicação

    Devido a todas as diferentes resoluções de canvas possíveis e densidades de pixel que um determinado dispositivo pode ter, um pixel não é um pixel porque há várias coisas a considerar (zoom, densidade de pixel, resolução e tamanho da canvas, orientação do dispositivo, proporção etc. ..). Nesse caso, um pixel é, na verdade, chamado de “unidade de referência óptica”, em vez de um pixel de hardware físico.

    Felizmente, você pode especificar uma meta tag de viewport na seção do seu documento para controlar a largura e o dimensionamento da viewport do navegador. Se essa tag tiver um valor de content de width=device-width , a width=device-width da canvas corresponderá aos pixels independentes do dispositivo e garantirá que todos os diferentes dispositivos sejam dimensionados e se comportem de maneira consistente.

      

    Em termos de consultas de mídia, você provavelmente usará max-width vez de max-device-width , já que max-width terá como alvo a porta de visualização (janela atual do navegador), enquanto max-device-width segmentará a canvas inteira real do dispositivo tamanho / resolução.

    Em outras palavras, se você estiver usando max-device-width , não verá consultas de mídia diferentes aplicadas ao resize o navegador da área de trabalho, pois, diferentemente da max-width , somente o tamanho real da canvas inteira do dispositivo é levado em consideração. não o tamanho atual da janela do navegador.

    Isso faz uma grande diferença se você estiver tentando criar um layout adaptável porque o site não será responsivo ao resize o navegador. Além disso, se você estiver usando max-device-width as consultas de mídia que estiver usando para segmentar dispositivos com canvass menores não se aplicarão a desktops, mesmo redimensionando a janela do navegador para corresponder ao tamanho de canvas menor.

    Este artigo no Google Developers desestimula o uso da max-device-width :

    Google Developers – Fundamentos da Web – Consultas de mídia CSS responsivas

    Também é possível criar consultas com base em *-device-width ; embora esta prática seja fortemente desencorajada .

    A diferença é sutil, mas muito importante: min-width é baseada no tamanho da janela do navegador, enquanto min-device-width é baseada no tamanho da canvas. Infelizmente, alguns navegadores, incluindo o navegador Android herdado, podem não informar a largura do dispositivo corretamente e, em vez disso, informar o tamanho da canvas em pixels do dispositivo, em vez da largura esperada da janela de visualização.

    Além disso, o uso de *-device-width pode impedir que o conteúdo seja adaptado em desktops ou outros dispositivos que permitem resize as janelas porque a consulta é baseada no tamanho real do dispositivo, não no tamanho da janela do navegador.

    Leitura adicional:

    • Quirksmode.org – Um pixel não é um pixel não é um pixel
    • W3.org Documentação de consultas de mídia CSS3
    • Google Developers – Fundamentos da Web – Viewport
    • Google Developers – Fundamentos da Web – Consultas de mídia CSS responsivas
    • MDN – Usando a metatag da viewport para controlar o layout em navegadores móveis

    Se você usar max-width, ao alterar o tamanho da janela do navegador em sua área de trabalho, poderá ser exibido um estilo orientado para dispositivos móveis, como elementos e menus sensíveis ao toque e esse tipo de coisa.

    É chocante para mim que parece ser opinião popular que isso é desejável. Eu não descobri se o design fluido / líquido antes do celular era considerado ruim pelas razões erradas ou certas. Parece-me que esta é apenas uma versão mais chique de layout líquido, mas que os designers estão adotando por algum motivo.

    Quando a comunidade de design em geral optou por ficar de lado com layouts fixos sobre líquidos em meados dos anos 2000, foi porque os restreams de texto impediram a legibilidade, muitas vezes resultando em viúvas e outros artefatos tipocharts. Além disso, manter a base de código era muitas vezes difícil de projetar para projetar para manter os elementos colidindo, etc. A única diferença entre layouts líquidos e design responsivo é que a resposta, devido a navegadores melhores e a proliferação de estruturas semelhantes a alvenaria, facilitam a realização.

    Eu pessoalmente uso min / max-device-width porque prefiro seguir as convenções de documentos de desktop que têm décadas de precedência. Nem todos os documentos que você abre na Internet vão se comportar dessa maneira em um desktop, nem outros tipos de documentos ou aplicativos que você carrega em sua área de trabalho. As páginas projetadas antes do domínio do celular, assim como o MS Word, Photoshop, etc., mantêm suas posições de rolagem e não alteram seus layouts, permitindo que os usuários acompanhem o conteúdo no stream da página ao executar a tarefa não relacionada de gerenciamento de janelas.

    Eu geralmente uso 3 pontos de interrupção: um para telefones, um para tablet e um para desktop. A área de trabalho e, muitas vezes, pelo menos, o retrato de paisagem são fixos e o retrato do tablet e abaixo são líquidos. Essa combinação de adaptável e responsivo permite que a área de trabalho se comporte como um site de desktop, mantendo-me do necessário para o layout de 10 layouts separados de dispositivo móvel de largura fixa. O texto não é exibido em dispositivos móveis porque a viewport não pode ser redimensionada.

    Evite a largura do dispositivo. O motivo é que você não pode saber como os navegadores dos usuários respondem a ele.

    Para o IOS, parece ser simples, pelo menos com o Safari. Parece ser uma única resposta de largura de dispositivo independente da orientação. Além disso, a largura do dispositivo é indicada apenas para o lado mais curto do dispositivo. Eu testei isso no iPhone 4S e no iPad. Eles responderam a 320 e 768, respectivamente, independentemente da orientação.

    Para Android, é mais imprevisível. Eu testei seis navegadores em um Huawei Ascend Y330 (navegador padrão Android, Chrome, Opera, Firefox, Firefox Beta, Dolphin). A resposta varia dependendo do tipo e orientação do navegador.

    Eu testei em uma página com consulta (max-device-width: *** px) e para descobrir qual valor de px eu preciso preencher para obter a consulta em um estado verdadeiro. Quatro valores diferentes foram necessários (320, 480, 534, 800) dependendo do tipo e da orientação do navegador. Isso torna a largura do dispositivo inutilizável.