Jak zasymulować ekran o wyższej rozdzielczości? [Zamknięte]

95

Czy istnieje sposób, aby przeglądarka mogła przetestować moje witryny w rozdzielczościach wyższych niż moje ekrany?

Np .: Mam ekran 1440 x 900, a stronę chcę przetestować w 1920 x 1200, 1920 x 1080 itd.

html css resolution

— HappyDeveloper
źródło

@deceze właściwie to bardzo dobra sugestia. Cały sens pojawiania się 960.gs polega na tym, że jeśli pracujesz z rozmiarami pikseli, twój projekt wygląda wszędzie tak samo, po prostu zajmuje różne ilości powierzchni ekranu w zależności od rozdzielczości ekranu. Nie ma potrzeby testowania grafiki powtarzającej się w poziomie w wysokiej rozdzielczości, o ile widać pełne 2 i trochę powtórzeń, aby upewnić się, że szwy się wyrównują. Lub możesz po prostu użyć zasady cykady, aby stworzyć coś bardziej interesującego.

— Endophage

1

@Endophage: Nie zgadzam się. Zbudowanie odpowiednio płynnych układów często daje lepsze rezultaty w odniesieniu np. Do preferencji użytkownika dotyczących rozmiaru czcionki. Wyglądanie wszędzie tak samo nie jest konieczne, to po prostu podglądanie pikseli.

— Ty

@You Nie widziałem jeszcze płynnego układu, który zmienia rozmiar czcionki. Zwróć uwagę, że stałe szerokości pikseli są dobre, ponieważ ludzkie oko ma trudności ze skanowaniem linii na określonej długości (uważam, że przy rozmiarze czcionki około 12 pikseli stwierdzono, że zawiera około 20 słów, możesz to sprawdzić samodzielnie). Jeśli mówisz o obniżeniu rozdzielczości telefonu, to inna historia, ale jeśli mówisz o rozdzielczościach komputerów stacjonarnych / laptopów, jeśli mam tylko duży ekran o wysokiej rozdzielczości i zmieniam rozmiar okna, skutecznie testuję pod kątem różne rozdzielczości.

— Endophage,

1

@Endophage: Stąd potrzeba użycia 40em(lub podobnej miary), a nie 960pxszerokości. Piksele nie będą się skalować, gdy zdecyduję, że rozmiar czcionki 12px jest dla mnie za mały i naciśnij Cmd- +. Poza tym okno mojej przeglądarki ma zaledwie 960 pikseli.

— Ty

@ W rzeczywistości piksele będą się skalować po trafieniu, Ctrl/Cmd +ponieważ jest to funkcja powiększania. Możesz spróbować tutaj w SO. Główna sekcja treści ma szerokość 960 pikseli. Używanie czegoś takiego jak 40em nie skaluje się z rozdzielczością ekranu. Użyte emrozmiary są zależne od rozmiaru czcionki elementu nadrzędnego, który jest dziedziczony aż do 1em / 16px na najwyższym poziomie, chyba że zostanie nadpisany (i przepraszam, powinno to być 12 punktów, a nie pikseli w moim wcześniejszym komentarzu). Czytaj dalej: kyleschaeffer.com/best-practices/…

— Endophage

76

[Edytuj: Najpierw sprawdź devtools swojej przeglądarki! Jak @SkylarIttner wskazuje w komentarzach, narzędzia do testowania responsywnego projektu zostały wprowadzone w większości przeglądarek od czasu opublikowania poniższego rozwiązania. Są teraz prawdopodobnie najlepszą / najłatwiejszą opcją.]

Możesz mnie poprawić, jeśli się mylę, po prostu utworzyć iframe z style="desired width & height"i src="your/test.site"jako jedyne dziecko <body>. Powinien wyświetlać witrynę tak, jakby rozdzielczość miała określoną szerokość / wysokość i powodować paski przewijania do jej zbadania.

Nie jest to tak wygodne, jak korzystanie z usług strony trzeciej, która wymaga samodzielnej konfiguracji, ale ma tę zaletę, że można testować lokalnie bez połączenia z Internetem.

— Cody Crumrine
źródło

5

Dlaczego ... Muszę powiedzieć, że to genialne. +1

— Mafia

Oczywiście! Dziękuję Ci! ^^

— Oskar Duveborn

Nie mogę ci wystarczająco podziękować!

— Rahman Sharif

1

Dzięki za wszystkie pozytywne opinie. Dobrze jest wiedzieć, kiedy coś jest pomocne.

— Cody Crumrine

1

Jeśli to pomoże każdemu, oto przykładowy kod, aby zrobić to, co sugerował @Cody Crumrine i jest Geniuszem !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>

— Stuart,

28

To rozwiązanie jest znacznie szybsze niż te proponowane powyżej:

http://www.infobyip.com/testwebsiteresolution.php

Nie jest tak wszechstronny, jak Browsershots.org, ale jest znacznie szybszy (kilka sekund w porównaniu z 45 minutową kolejką).

— Kyle
źródło

To nie jest zła odpowiedź. Jednak ta witryna nie zapewnia absolutnie niczego, czego nie można już zrobić samodzielnie, po prostu zmieniając rozmiar okna przeglądarki na dowolnym komputerze stacjonarnym. IMHO, linki na tej stronie do tabletów i telefonów są całkowicie bezwartościowe ... ponieważ na małym ekranie iPoda moja witryna o szerokości 1000 pikseli jest automatycznie zmieniana przez Mobile Safari, aby wyświetlać idealnie dobrze.

— Sparky

4

@ Sparky672, osobiście nie mogę zmienić rozmiaru przeglądarki, aby była większa niż rozdzielczość ekranu. OP prosił o obejrzenie 1920 na 1440. Może jest na to sposób, ale czy jest to tak proste, jak rozwiązanie infobyip? Przepraszam, jeśli przeoczyłem coś oczywistego (czuję, że mogę być).

— Kyle

2

Dzięki @ Sparky672 i nie ma problemu. Ale czy nie powinieneś usunąć swojego komentarza „ta witryna nie dostarcza absolutnie niczego, czego nie możesz zrobić samodzielnie, po prostu zmieniając rozmiar okna przeglądarki na dowolnym komputerze stacjonarnym”, ponieważ to nieprawda?

— Kyle

1

@ Sparky672, a co z pionem?

— Kyle

1

Używam pozycji pionowej, aby zobaczyć, co znajduje się powyżej i poniżej części strony widocznej na ekranie. Łączę to z StatsCounter i MouseFlow, aby zobaczyć, jaki procent odbiorców widzi co. Kocham cię Sparky! Myślę, że źle czytasz mój ton. A ja chciałem być pomocny. Nikt nie zajrzy do rozwiązania, które podaję, mając 0 głosów i listę komentarzy. Ale cóż ...

— Kyle

9

Jakieś pomysły:

Użyj powiększenia przeglądarki, 1024x768 50% powiększenia = 2048x1536 symulowanej rozdzielczości, Wiem, że Chrome zmienia rozmiar obrazów i tym podobne. Sprawy stają się trudne do odczytania, ale zakładam, że testujesz umieszczanie i tym podobne.

Możesz także użyć niektórych programów do zrzutów ekranu, aby zrobić zrzuty ekranu w wyższej niż normalna rozdzielczości (firehot w Firefoksie pozwolił mi to zrobić, ale miał problemy z pamięcią przy naprawdę wysokich rozdzielczościach i nie jest już darmowy).

— Dziwna wola
źródło

6

Jednym z rozwiązań, być może przesadą, byłoby użycie Xvfb : ustaw żądaną rozdzielczość i głębię kolorów, załaduj stronę w przeglądarkach i zrób zrzuty ekranu.

— Eugen Constantin Dinca
źródło

4

Wypróbuj viewlike.us lub screen-resolution.com . To nie wszystkie możliwe rozwiązania, ale przynajmniej te najbardziej powszechne.

Nie próbowałem ich, ale wydaje się to całkiem proste.

— Eddie Cheng
źródło

screen-resolution wyświetla następujący komunikat: „Twoja rozdzielczość ekranu jest za mała Wybrane wyskakujące okienko jest za duże w stosunku do używanej rozdzielczości ekranu. Twoja rozdzielczość ekranu wynosi 1440 na 900 pikseli. Wyskakujące okienko, które próbujesz otworzyć, to 1920 pikseli na 1200. ”

— HappyDeveloper

view like my zgłasza następujący komunikat: „Forbidden Nie masz uprawnień dostępu / na tym serwerze. Ponadto podczas próby użycia ErrorDocument do obsługi żądania wystąpił błąd 404 Not Found. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Serwer na viewlike.us Port 80 "

— HappyDeveloper

2

Chociaż nie powie Ci to dokładnej rozdzielczości testu, możesz użyć zoomnarzędzia w przeglądarce Chrome lub FF, aby pomniejszyć. To da dość dokładny obraz tego, jak strona wygląda na ekranach o wyższej rozdzielczości.

— Jason Gennaro
źródło

2

Jeśli nie masz nic przeciwko wyświetleniu statycznego zrzutu ekranu swojej witryny, polecam http://browsershots.org/

Dają ci możliwość oglądania zrzutów ekranu twojej witryny w praktycznie dowolnej kombinacji przeglądarki / systemu operacyjnego, w tym możliwość określenia rozmiaru ekranu, a także całą gamę innych opcji.

Warto dodać do zakładek.

— Spudley
źródło

1

Możesz spróbować wkhtmltoimage , który umożliwia robienie zrzutów ekranu w dowolnej rozdzielczości.

Ponadto w KDE4 można powiększyć okno poza rozmiar ekranu. Myślę, że widziałem to również w Windows 7. Nie jestem pewien co do innych systemów operacyjnych.

— user123444555621
źródło

1

IE9 umożliwia zmianę rozmiaru okna przeglądarki do dowolnego rozmiaru: naciśnij klawisz F12, aby wyświetlić narzędzia programistyczne, przejdź do Narzędzia | Zmień rozmiar i wybierz preferowany rozmiar. Następnie użyj narzędzia, które może przechwytywać okna poza ekranem, jeśli okno jest większe niż ekran. Ten artykuł wydaje się wskazywać, że Snagit może to zrobić. Następnie spójrz na zrobione zdjęcie.

— Jaco Briers
źródło