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


85

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.



@Jsuar: Niestety tak nie jest. Wydaje się, że biblioteka JavaScript nie działa z retina.js, a Opera wydaje się być przeznaczona do urządzeń mobilnych.
Alexander Rechsteiner,

2
Spróbuj zrobić wszystkie obrazy, takie jak logo, w formacie SVG zamiast w formacie PNG lub JPG.
Seph

Odpowiedzi:


152

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ć.


2
Czy ktoś wie, czy jest coś podobnego dla Chrome?
Krzysztof Romanowski

@castus Nie myśl tak, najlepsze, co masz, to powiększanie i nie sądzę, aby to działało w zapytaniach o media.
andrewb,

@andrewb: Zastanawiałem się nad tym samym, ponieważ poprawiło to moją reputację (yay!). Może został zaindeksowany w Google pod kątem często wyszukiwanego hasła.
Alexander Rechsteiner

@AlexanderRechsteiner To faktycznie zostało powiązane przez stronę Smashing Magazine na Facebooku i zostało udostępnione na Facebooku przez sporo osób. Dziękuję za przyjęcie mojej odpowiedzi!
andrewb,

@ChristinaArasmoBeymer Yep it can
andrewb

25

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! ! :)


1
Nie patrzyłem na MediaQueries, ale jeśli chodzi tylko o przeglądanie jakości obrazu, nie widzę, jak to jest pomocne. Musisz zwiększyć piksele X2, w przeciwnym razie nie będziesz w stanie wizualnie zobaczyć, która zawartość jest gotowa na Retina, a która nie. Zrobiłem szybki test i Chrome właśnie sprawił, że witryna google.com wyglądała na małą, ale przechodząc do Firefoksa, odkryłem, że Google Doodle w tamtym czasie nie miał gęstości pikseli Retina. Ale hej, jeśli to działa dla ludzi, oznacza to pominięcie szalonego dużego interfejsu użytkownika z konfiguracją Firefoksa!
andrewb

Tak, nie chodzi tutaj o poprawę jakości obrazu (jest to niemożliwe, ponieważ fizyczny ekran pozostaje z tą samą gęstością pikseli), ale aby być pewnym, jako programista bez Retina Mac, nadal obejmujesz wszystkie podstawy.
Urb Gim Tam

Jeśli chcesz tylko sprawdzić jakość obrazu, nie musisz nic robić, tylko powiększyć przeglądarkę o 200%. Jeśli chcesz uruchamiać zapytania o media w Chrome, wykonaj jedno i drugie: powiększ i emuluj.
Michael McGinnis,

@MichaelMcGinnis Nie mogę emulować i powiększać w Chrome, czy udało Ci się?
andrewb

Tak @andrewb, wygląda na to, że muszą to być oddzielne testy. Kiedy powiększam, a następnie emuluję, obrazy znów stają się małe. Powiększanie podczas emulacji nie wpływa na rozmiary obrazu.
Michael McGinnis

14

W chrome możesz to zrobić poprzez:

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


2) Następnie wybierz „Pokaż widok„ Emulacja ”w szufladzie konsoli”. wprowadź opis obrazu tutaj


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.

wprowadź opis obrazu tutaj


Dzięki. W obecnym Chrome jest trochę podobnie. Czy 2.5jest jedna magiczna liczba dla wszystkich wyświetlaczy Retina? Czy też wzrosła / zmniejszyła się od 2014 roku? Edycja: Ach, jest tutaj
crusy

10

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

Niektóre obejścia

Mniej istotne


Dzięki, punktor z developer.apple.com poprowadził mnie na właściwą ścieżkę. Podobnie jak ta inna odpowiedź tutaj w Stack Overflow.
Alex Kendrick

7

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

Kliknij ikonę Przełącz tryb urządzenia

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

Wybierz Laptop z ekranem HiDPI

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


1

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.


1

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)

wprowadź opis obrazu tutaj

  1. 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 .

wprowadź opis obrazu tutaj

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

wprowadź opis obrazu tutaj

  1. 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.

-1

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.


Jakiej przeglądarki lub sprzętu używasz? Czy masz na myśli Mozillę zamiast Bugzilli?
Michael McGinnis

-3

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.


Tak, i możesz uruchomić system OS X jako
maszynę

@filtah naprawdę nie jest najgorszą sugestią
Paul

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.