Jaki jest najlepszy sposób przetestowania strony internetowej w wyższej rozdzielczości niż obecne rozdzielczości ekranu?

10

Tworzę responsywną witrynę, w której muszę przetestować renderowanie css, html i javascript mojej strony w rozdzielczości 2400px, a ekran ma tylko 1900px.

metalowa przekładnia pełna
źródło
możliwy duplikat Jak zrobić zrzut ekranu całej strony?
Ƭᴇcʜιᴇ007
Czy zdajesz sobie sprawę, że w większości systemów możesz zmieniać rozmiar okien przeglądarki poza rozdzielczość ekranu? Po prostu przenieś je do połowy ekranu, a następnie zmień rozmiar ramki, która jest teraz na środku ekranu. Jest bezużyteczny do faktycznego użycia, ale wystarczy do testowania. Ten zrzut ekranu pełnego okna został zrobiony w systemie OS X o rozdzielczości ekranu 1680 x 150.
Daniel Beck
@DanielBeck - dziwne, próbuję tego samego na moim Chomre (Windows), ale nie wykracza poza mój obecny ekran
solidne metalowe koło zębate
To naprawdę jest problem z tym, że twój system próbuje przechytrzyć cię . Można odtworzyć za pomocą Safari na Windows 7.
Daniel Beck
Mój jest też Windows 7
metalowy sprzęt

Odpowiedzi:

3

W przeglądarce Chrome:

  1. Prasa F12. Spowoduje to otwarcie DevTools.

  2. Kliknij ikonę ustawień w prawym dolnym rogu. Spowoduje to otwarcie ustawień DevTools.

  3. Przejdź do Zastępowania w menu po lewej stronie.

  4. Zaznacz Włącz i Wskaźniki urządzenia.

  5. Wpisz rozdzielczość ekranu

Zawsze go używam, to naprawdę wygodne.

Arman Bimatov
źródło
2

Jeśli naciśniesz Ctrl+ Shift+ Mw najnowszych wersjach Firefoksa, przejdziesz do responsywnego widoku projektu , który może zmienić rozmiar okienka przeglądarki, aby był większy niż rzeczywisty rozmiar ekranu. Możesz także robić zrzuty ekranu i symulować zdarzenia dotykowe od FF 26 i kolejnych.

Zrzut ekranu z RDV
Kliknij, aby zobaczyć pełny rozmiar

Zmiana rozmiaru może być łatwiejsza po zmniejszeniu okna - możesz przeciągać rozmiary za jednym razem. Lub po prostu wprowadź niestandardowe ustawienie wstępne z menu rozwijanego.

Kok
źródło
Czy istnieje interfejs API dla tej opcji? Za włączenie go za pomocą kodu js wstrzykniętego ze strony internetowej lub z wnętrza dodatku?
Kamal Reddy
@KamalReddy Nie sądzę, byś mógł to zrobić z kontekstu treści (strony internetowej), ale powinno to być możliwe z kontekstu chrome (addon). Cóż, w przyszłości tak. Być może możesz symulować Ctrl + Shift + M?
Bob
1

Możesz wypróbować tę stronę internetową, która pozwala przetestować twoją stronę internetową z dowolną rozdzielczością ekranu, którą możesz wybrać spośród ustawionych rozdzielczości lub wprowadzić własną rozdzielczość. mam nadzieję, że te linie okażą się pomocne.

kamalam
źródło
Blokowanie przez nasz serwer proxy. Czy to wskaźnik do innej strony, czy strona PHP to faktyczna strona narzędzia?
Kanadyjczyk Łukasz
strona PHP, którą tu dodałem, jest rzeczywistą stroną narzędzia
kamalam
0

To pytanie jest prawdopodobnie bardziej odpowiednie dla webmasterów, ale zrobię to i zasugeruję ViewLikeUs, które

pozwala sprawdzić, jak wygląda Twoja witryna w najpopularniejszych formatach rozdzielczości.

CharlieRB
źródło
1
ma tylko 1920 max
metalowy solidny bryła
0

Dodaj niestandardową rozdzielczość ekranu w panelu sterowania karty wideo.

GENIEBEN
źródło
3
Rozdzielczości większe niż obsługiwane przez ekran? Czy możesz podać więcej szczegółów, jak to skonfigurować i jak to wygląda?
Daniel Beck
@DanielBeck Ten link do samouczka YouTube dotyczy kart nVidia. Dość podobny w przypadku ATI / AMD.
GENiEBEN,
2
@ElGenieben Ten film wyraźnie ostrzega o 0:39, że możesz uszkodzić ekran, ustawiając zbyt wysoką rozdzielczość.
Nicole Hamilton,
0

Po prostu zmień powiększenie w przeglądarce, kiedy pomniejszasz, zasadniczo rozmiar twojego okna zgłasza coraz większą szerokość twojej aplikacji.

przykład jsfiddle tutaj , po prostu kliknij przycisk, zobacz szerokość, którą zgłasza, a następnie pomniejsz nieco i kliknij ten sam przycisk - zgłosi większy rozmiar.

Doobeh
źródło
0

Wypróbuj niestandardowe ustawienia rozdzielczości w emulatorze urządzeń w Google Chrome. Daje to większą kontrolę niż korzystanie z funkcji powiększania w przeglądarce.

Włącz emulator urządzenia i zaznacz opcję „powiększ, aby dopasować”.

Ręcznie wprowadź rozdzielczości do 9999px szerokości (lub przeciągnij krawędzie emulowanego ekranu. Emulowana rozdzielczość zostanie przeskalowana, aby zmieściła się w twoim oknie roboczym.

Możesz utrzymać niską wysokość rozdzielczości, ponieważ i tak będziesz mógł przewijać w dół. W ten sposób możesz również pozostawić inspektora otwartego. Świetny przepływ pracy do tworzenia stron internetowych!

bramchi
źródło