Jak przetestować witrynę pod kątem Retina w systemie Windows bez rzeczywistego wyświetlacza Retina?

Czy istnieje sposób symulacji wyświetlacza Retina w systemie Windows, aby przetestować witrynę internetową pod kątem wyświetlaczy HiDPI, takich jak Retina?

Uruchamiam system Windows na standardowym monitorze 24 "1920 x 1080. Wczoraj wieczorem odwiedziłem witrynę na nowym 15-calowym MacBooku Pro Retina i grafika wyglądała na zamazaną (znacznie gorzej niż na zwykłym 15-calowym MacBooku), podczas gdy czcionka była super ostre i ostre, dzięki czemu logo wygląda jeszcze gorzej z powodu bezpośredniego porównania.

Postępowałem zgodnie z tym samouczkiem, aby przygotować moją witrynę Retina:

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

Użyłem podejścia retina.js, ponieważ nie mam żadnych obrazów tła.

Czy jest jakiś sposób, żebym mógł sprawdzić, czy to faktycznie działa? Oczywiście mógłbym poprosić mojego przyjaciela o użycie jego notatnika Retina, ale nie jest to dla mnie wykonalne. Chcę móc przynajmniej z grubsza przetestować strony internetowe pod kątem zgodności z Retina w moim własnym środowisku.

about: config hack w przeglądarce Firefox

W rzeczywistości możesz używać przeglądarki Firefox:

1. Przejdź do „about: config”
2. Znajdź „layout.css.devPixelsPerPx
3. Zmień go na żądany współczynnik (1 dla normalnej, 2 dla siatkówki itp. -1 wydaje się być domyślnym).

Zrzut ekranu:

Odśwież swoją stronę - bum, Twoje zapytanie o media właśnie się włączyło! Czapki z głów przed Firefoksem za to, że jest świetny do tworzenia stron internetowych! Uwaga: strona nie tylko zostanie teraz dwukrotnie zwiększona, ale także dwukrotnie zwiększy się interfejs użytkownika przeglądarki Firefox. To podwojenie lub powiększenie jest konieczne, ponieważ jest to jedyny sposób, w jaki będziesz w stanie zbadać wszystkie piksele na ekranie o standardowym współczynniku pikseli.

Działa to dobrze w systemie Windows 7 z przeglądarką Firefox 21.0, a także w systemie Mac OS X z przeglądarką Firefox 27.0.1.

Jeśli nie używasz zapytań o media i innej bardziej zaawansowanej logiki (tj. Dostarczasz wszystkim obrazy HiDPI), możesz po prostu powiększyć swoją przeglądarkę do 200%. Emulacja Chrome jest pomocnym narzędziem, a także uruchamia zapytania o media, ale ponieważ zapobiega powiększaniu, nie możesz sprawdzić jakości obrazu.

Powiększanie w Firefoksie i Edge

Obecnie w przeglądarkach Firefox i Edge, jeśli powiększysz, uruchamia zapytania o media oparte na dppx. Więc to łatwiejsze podejście może być wystarczający, ale należy pamiętać, że funkcjonalność jest zgłaszane jako „nie będzie naprawić” błąd w Firefoksie, więc może się to zmienić.

W Google Chrome w wersji „33.0.1720.0 Canary” możesz teraz emulować urządzenia takie jak iPhone5 i inne, korzystając ze świetnego zestawu parametrów, takich jak „Współczynnik pikseli urządzenia”, „Wskaźniki czcionek Androida” i „Emulacja obszaru roboczego” .

Nie ma już potrzeby hakowania Firefoksa - i tak ciężko z nim pracować.

Dzięki zespołowi programistów Google! ! :)

W chrome możesz to zrobić poprzez:

1) Otwórz Chrome Developer Tools i kliknij małą ikonę „koła zębatego”.

2) Następnie wybierz „Pokaż widok„ Emulacja ”w szufladzie konsoli”.

3) Na koniec otwórz „szufladę konsoli” w Narzędziach dla programistów i wybierz opcję Emulacja . Ustaw ekran Emuluj i ustaw współczynnik pikseli urządzenia na 2,5.

O ile wiem, nie ma innej możliwości niż zakup urządzenia siatkówkowego.

Niektóre obejścia

• Sugerowane tutaj:

  • Jeśli podwoisz rozmiary i proporcje obrazu nadal są takie same, jesteś prawie bezpieczny. Jeśli nie masz wyświetlacza Retina do przetestowania, przełącz zapytanie o media ze współczynnikiem pikseli na coś opartego na szerokości.

  • Testowanie i rozwiązywanie problemów z treściami w wysokiej rozdzielczości
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Jak programować pod kątem HiDPI („Retina”) bez Retina MacBook Pro
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

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

Mniej istotne

• Jak stworzyć responsywną witrynę z obsługą Retina

• Jak projektować wyświetlacze Retina firmy Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Tworzenie witryn internetowych dla wyświetlaczy Retina: nawiązywanie przyjaźni dzięki pikselom
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Jak stworzyć witrynę internetową do wyświetlania siatkówki?

• jak przygotować siatkówkę?

Bieżąca metoda emulacji wyświetlacza Retina (HiDPI) w przeglądarce Google Chrome

1) „ Right Click ” na stronie internetowej, a następnie wybierz opcję „ Sprawdź ”, aby otworzyć Chrome Developer Tools

2) Kliknij ikonę „ Przełącz tryb urządzenia ”

3) Z rozwijanego menu urządzenia u góry ekranu wybierz „ Laptop z ekranem HiDPI ”

4) Możesz teraz zobaczyć, jak strona internetowa będzie wyglądać na ekranie Retina znanym jako HiDPI

Używam biblioteki do zmiany rozmiaru obrazu, aby dynamicznie tworzyć obrazy. W przypadku wersji 2x dodam dynamiczny znak wodny podczas debugowania - dzięki temu bardzo łatwo jest sprawdzić, czy obraz o wysokiej rozdzielczości jest rzeczywiście wyświetlany, czy nie. Uważam, że jest to bardzo pomocne.

Sposób, w jaki to działa, będzie różny, więc nie obejmuje przykładowego kodu.

Google Chrome w wersji 80

1. Otwórz narzędzia deweloperskie ctrl-shift j
2. Przełącz pasek narzędzi urządzenia, klikając ikonę tabletu / telefonu w lewym górnym rogu (zmieni kolor na niebieski po kliknięciu)

3. Teraz rzutnia powinna mieć nad nią pasek narzędzi. Kliknij ikonę opcji (3 kropki) w prawym górnym rogu i wybierz opcję Dodaj współczynnik pikseli urządzenia .

4. Powinieneś teraz zobaczyć opcję na pasku narzędzi. Tutaj możesz przełączyć się na 1x, 2x lub 3x.

5. Podczas testowania upewnij się, że naciskasz przycisk odświeżania za każdym razem, gdy zmieniasz współczynnik pikseli. Jeśli ustawisz współczynnik na 2x, a następnie ustawisz go z powrotem na niższy, nie zobaczysz żadnych zmian, ponieważ przeglądarka nie pobierze zasobów 1x, jeśli już pobrała 2x lub więcej.

Nie wiem, czy to jest zbyt proste, wciskam ctrl i przewijam i uruchamia zapytanie o media. Sprawdziłem to w bugzilli i działa. Nie jestem pewien co do skalowania SVG, ponieważ wydaje się rozmyte, ale jest to obraz SVG.

Jeśli masz maszynę wirtualną Mac (lub maszynę wirtualną Mac OSX), możesz użyć emulatora ios z xcode. wysadza okno dwa razy większe, więc nie wygląda to tak, jak wygląda w prawdziwym życiu, ale wyraźnie pokaże, czy obrazy są rozmyte, czy nie.