Como testar um site para Retina no Windows sem uma tela Retina real?

Existe uma maneira de simular uma tela Retina no Windows para testar um site para telas HiDPI, como Retina?

Eu executo o Windows em um monitor padrão de 24 "1920x1080. Ontem à noite eu verifiquei meu site em um novo MacBook Pro Retina 15" de um amigo e os gráficos pareciam todos borrados (muito piores do que em um MacBook regular de 15 polegadas), enquanto a fonte estava super nítido e nítido, fazendo com que o logotipo pareça ainda pior por causa da comparação direta.

Segui este tutorial para deixar meu site pronto para o Retina:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Usei a abordagem retina.js, pois não tenho nenhuma imagem de fundo.

Existe alguma maneira de testar se isso realmente funciona? Obviamente, eu poderia pedir ao meu amigo para usar o Retina Notebook, mas esse não é um fluxo de trabalho viável para mim. Eu quero ser capaz de testar, pelo menos aproximadamente, sites de compatibilidade com Retina em meu próprio ambiente.

sobre: ​​hack de configuração no Firefox

Você realmente pode usar o Firefox:

1. Vá para "about: config"
2. Encontre "layout.css.devPixelsPerPx
3. Altere para a proporção desejada (1 para normal, 2 para retina etc. -1 parece ser o padrão).

Captura de tela:

Atualize sua página - boom, sua consulta de mídia agora começou! Tiremos o chapéu para o Firefox por ser incrível para desenvolvimento web! Atenção, não só o site será aumentado para o dobro do tamanho, como a interface do Firefox também será duplicada. Essa duplicação ou zoom é necessário, pois é a única maneira de examinar todos os pixels em uma tela de proporção de pixels padrão.

Isso funciona bem no Windows 7 com Firefox 21.0 e também no Mac OS X com Firefox 27.0.1.

Se você não estiver usando consultas de mídia e outras lógicas mais avançadas (ou seja, você está alimentando todas as pessoas com imagens HiDPI), pode apenas aumentar o zoom com seu navegador para 200%. A emulação do Chrome é uma ferramenta útil e também ativa consultas de mídia, mas como impede o zoom, não é possível examinar a qualidade da imagem.

Zoom no Firefox e Edge

Atualmente no Firefox e no Edge, se você aplicar zoom, ele acionará consultas de mídia baseadas em dppx. Portanto, essa abordagem mais fácil pode ser suficiente, mas esteja ciente de que a funcionalidade é relatada como um bug "não corrige" para o Firefox, então isso pode mudar.

Na versão "33.0.1720.0 Canary" do Google Chrome, agora você pode emular dispositivos como iPhone5 e outros com um grande conjunto de parâmetros como "Taxa de pixels do dispositivo", "métricas de fonte do Android" e "Emulação de janela de visualização" .

Não há mais necessidade desse hack do Firefox - difícil de trabalhar, de qualquer maneira.

Obrigado, equipe de desenvolvimento do Google! ! :)

No Chrome, você pode fazer isso:

1) Abra as Ferramentas do desenvolvedor do Chrome e clique no pequeno ícone de "engrenagem".

2) Em seguida, escolha "Mostrar visualização de 'Emulação' na gaveta do console".

3) Por fim, abra a "gaveta do console" nas Ferramentas do desenvolvedor e escolha Emulação . Defina Emular tela e defina a razão de pixel do dispositivo para 2,5.

Pelo que eu posso dizer, não é possível senão comprar um dispositivo de retina.

Algumas Soluções Alternativas

• Sugerido aqui:

  • Se você dobrou os tamanhos e proporções da imagem ainda são os mesmos, você está muito seguro. Se você não tiver uma tela de retina para testar, mude da consulta de mídia de proporção de pixel para algo baseado em largura.

  • Teste e solução de problemas de conteúdo de alta resolução
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Como desenvolver para HiDPI (“Retina”) sem um Retina MacBook Pro
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• Imagens Retina do WordPress
  http://wpmu.org/wordpress-retina/

Menos relevante

• Como criar um site responsivo e pronto para retina

• Como projetar para telas de retina da Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Criando sites para telas de retina: fazendo amigos com pixels
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Como desenvolver um site para exibição de retina?

• como preparar a retina?

Método atual para emular uma tela de retina (HiDPI) com o Google Chrome

1) " Clique com o botão direito " na página da web e selecione " Inspecionar " para abrir as ferramentas de desenvolvedor do Chrome

2) Clique no ícone " Alternar modo de dispositivo "

3) Na caixa suspensa do dispositivo na parte superior da tela, selecione " Laptop com tela HiDPI "

4) Agora você pode ver a aparência do site em uma tela Retina ou HiDPI

Eu uso uma biblioteca de redimensionamento de imagens para criar imagens dinamicamente. Para a versão 2x, adiciono uma marca d'água dinâmica durante a depuração - isso torna muito fácil ver se a imagem de alta resolução está realmente sendo exibida ou não. Achei muito útil.

A maneira como isso funciona irá variar, portanto, não incluindo o código de amostra.

Google Chrome versão 80

1. Abra as ferramentas do desenvolvedor ctrl-shift j
2. Alterne a barra de ferramentas do dispositivo clicando no ícone do tablet / telefone no canto superior esquerdo (ele ficará azul se você clicar nele)

3. Agora, a janela de exibição deve ter uma barra de ferramentas acima dela. Clique no ícone de opções (3 pontos) no canto superior direito e selecione a opção Adicionar proporção de pixels do dispositivo .

4. Agora você deve ver a opção na barra de ferramentas. A partir daqui, você pode mudar para 1x, 2x ou 3x.

5. Quando estiver testando, certifique-se de apertar o botão de atualização sempre que alterar a proporção de pixels. Se você definir a proporção para 2x e, em seguida, defini-la novamente para menor, não verá nenhuma alteração porque o navegador não buscará ativos 1x se já tiver buscado 2x ou superior.

Não sei se isso é muito simples, pressiono ctrl e rolar e isso aciona a consulta de mídia. Eu verifiquei no bugzilla e funciona. Não tenho certeza sobre o dimensionamento svg, pois parece borrado, mas é a imagem svg.

Se você tem um mac (ou máquina virtual mac osx), pode usar o emulador ios com xcode. ele aumenta a janela com o dobro do tamanho, então não é como ela aparece na vida real, mas mostra claramente se suas imagens estão borradas ou não.