Przeglądarka nie skaluje się poniżej 400px?

151

Pracuję nad złożeniem płynnego arkusza stylów i działa wspaniale. Jedną z rzeczy, które zauważyłem, jest to, że moje okno przeglądarki w Chrome nie zmieni rozmiaru poniżej 400 pikseli, po prostu utknie tam, aw FF, gdy zmniejszam, po prostu zatrzymuje się na około 400 pikseli, a następnie wyświetla poziomy pasek przewijania.

Kiedy otwieram witrynę na moim telefonie, wygląda idealnie przy około 320 pikseli, więc wiem, że skaluje się poniżej 400 pikseli.

Byłem ciekawy, czy ktoś wie, czy to sprawa przeglądarki / komputera, czy też powinienem patrzeć na coś innego niż mój CSS. Nie mam żadnych deklaracji minimalnej szerokości, więc nie jestem pewien, co może być tego przyczyną.

Znowu na pulpicie skaluje się do minimalnej szerokości około 400 pikseli i zatrzymuje się, ale kiedy otwieram go na telefonie, skaluje się do rozmiaru ekranu telefonu, który wynosi około 320 pikseli ... ciekawe, dlaczego przynajmniej wygrał na komputerach nie można zmniejszać do 320 pikseli.

-edit- Poza tym nie jestem pewien, czy to ma znaczenie, ale Opera pozwala na to prawie do zera ... Więc działa z Operą, a nie w Chrome lub FF ... jakieś pomysły?

Brodie
źródło
1
Pamiętam, że Chrome kiedyś składał się do maleńkiej cegły. Jest to więc coś, co zostało celowo wprowadzone. W obecnej przeglądarce Chrome widzę, że okno będzie tak małe, jak górny rząd ikon. Ukrywanie przycisku głównego lub ikon rozszerzeń pozwala mi trochę zmniejszyć rozmiar.
mrtsherman
7
To będzie coś konkretnego na temat twojego CSS i znaczników. Bez niczego do recenzji, nie ma wątpliwości. Strzelanie do domysłów w ciemności nie jest tak naprawdę przydatne. W takim przypadku musisz samodzielnie debugować.
Jared Farrish
3
Tak, jestem prawie pewien, że jest to tylko własna dosłowna minimalna szerokość okna przeglądarki, tak jak większość każdego programu ma minimalną szerokość, do której można zmienić rozmiar. Wygląda na to, że mój Chrome nie może zmienić rozmiaru mniejszego niż 250px widocznego obszaru.
justisb
1
Chrome 33 ustawił go z powrotem na 400px
Sparkup,
4
„To będzie coś konkretnego na temat twojego CSS i znaczników”… Ehm nie, właściwie to nie było.
Stijn de Witt

Odpowiedzi:

253

Chrome nie może zmienić rozmiaru w poziomie poniżej 400px (OS X) lub 218px (Windows), ale mam naprawdę proste rozwiązanie problemu:

  1. Zadokuj inspektora sieci po prawej stronie zamiast na dole
  2. Zmień rozmiar panelu inspektora - możesz teraz zmniejszyć obszar przeglądarki (do 0 pikseli)

Aktualizacja: Chrome umożliwia teraz układanie okien inspektora w pionie po zadokowaniu po prawej stronie! To naprawdę poprawia układ.

ustawienie pionowego układu paneli

Panele HTML i CSS pasują naprawdę dobrze, a nawet otwierasz mały panel konsoli. Pozwoliło mi to całkowicie przejść z Firefoksa / Firebuga do Chrome.

Inspektor zadokowany po prawej stronie z pionowym układem paneli

Jeśli chcesz przejść o krok dalej, spójrz na ustawienia inspektora sieci (ikona koła zębatego w prawym dolnym rogu) i przejdź do zakładki klienta użytkownika . Możesz ustawić rozdzielczość ekranu na dowolną, a nawet szybko przełączać się między pionową a poziomą.

Ustawienia rozdzielczości urządzenia

AKTUALIZACJA : Oto kolejne naprawdę fajne narzędzie, z którym się spotkałem. http://lab.maltewassermann.com/viewport-resizer/

Oisin Lavery
źródło
1
+1 Inspektor jest do tego idealny, pozwala nawet ustawić
klienta
2
Jesteś meżczyzną. A debugowanie małego ekranu jest jeszcze prostsze, gdy jest dostępne odpowiednio duże okno inspektora.
aebersold
1
Dzięki @aebersold Tak, to miły bonus, otrzymując ładne, duże okno Inspektora podczas pracy nad układami mobilnymi.
Oisin Lavery
3
IMO powinna to być akceptowana odpowiedź. Pomysł jest prosty i genialny, a Twoja wskazówka nad zastąpieniem danych jest niesamowita. Tak samo jak bookmarklet, z którym łączysz się!
marlar
5
Nikt inny nie mógł dowiedzieć się, jak zadokować narzędzia programistyczne w prawo? stackoverflow.com/questions/10023640/…
Erti-Chris Eelmaa
36

może to być spowodowane dodatkami zainstalowanymi w przeglądarce. usuń lub ukryj wszystkie ikony dodatków z paska narzędzi i spróbuj zmienić rozmiar. gdy są dodatki, przeglądarka zmienia tylko rozmiar paska adresu i utrzymuje dodatki widoczne.

Aktualizacja: 14.07.2013 r


W najnowszej wersji Chrome możesz teraz zmienić rozmiar paska adresu i automatycznie ukryje dodatki.

Chamika Sandamal
źródło
4
gdy są dodatki, przeglądarka zmienia rozmiar tylko do rozmiaru paska adresu i utrzymuje dodatki widoczne. mam nadzieję, że to rozumiesz. to nie jest efekt uboczny dodatków. ale gdy są zainstalowane dodatki, przeglądarka nie może zmienić rozmiaru do wartości minimalnej. ze względu na ikony dodatków obok paska adresu.
Chamika Sandamal
2
Usunięcie wszystkich ikon dodatków w Chrome nie rozwiązało tego problemu. rozwiązanie nayan9 zrobiło.
Andrew Shooner
31
To nie jest odpowiedź . Nawet po wyłączeniu wszystkich dodatków / rozszerzeń minimalna szerokość Chrome nadal wynosi 400 pikseli.
Oisin Lavery
4
@ChamikaSandamal to nie jest poprawne. OP próbuje przeskalować swoje okno poniżej 400px. Jest to niemożliwe w Chrome, ponieważ przeglądarka ma twardą minimalną szerokość 400 pikseli. Jedynym sposobem na osiągnięcie efektu, którego szuka PO, jest odpowiedź Sherpanauta. Twoja odpowiedź nie robi absolutnie nic poza pomaganiem użytkownikowi zbliżyć się do twardej minimalnej szerokości 400 pikseli, co nie jest tym, czego szukał OP.
Fred Stevens-Smith
2
@ChamikaSandamal, chociaż może działać dla Ciebie, nie działa dla reszty z nas. To nic przeciwko tobie. Po prostu ta odpowiedź brzmi: nie rozwiązuje problemu dla wielu z nas.
DA.
19

Ja również byłem zaskoczony, ale otrzymałem proste rozwiązanie. Właśnie utworzyłem plik HTML z linkiem do otwarcia nowego okna:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

To nowe okno ma tylko pasek adresu, a Chrome pozwala mi dowolnie zmieniać jego rozmiar do 111x80.

nayan9
źródło
1
LOL, porozmawiaj o włamaniu, aby zrobić prostą rzecz
Otto
17

Rozwiązanie nayan9 działa świetnie i można je umieścić w zakładce bez konieczności tworzenia pliku html. W Chrome utwórz nową zakładkę z adresem URL:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

Nadaj mu nazwę „Otwórz małe okno” lub podobną. Umożliwi to łatwe otwieranie okien bez ograniczeń rozmiaru w przeglądarce Chrome. Pamiętaj, że samo skopiowanie tego do paska adresu nie zadziała - chrome usuwa „javascript:”.

drinkdecaf
źródło
To jest odpowiedź, która mi pomogła. Przydatne, gdy Tweetdeck ma jak najmniejszy rozmiar.
Krug
10

Jeśli chcesz zmniejszyć szerokość ekranu, aby emulować różne urządzenia (i po co jeszcze miałbyś to robić?):

Chrome ma teraz sekcję Emulacja w swoim inspektorze, aktywowaną przez kliknięcie małej ikony telefonu na górnym pasku menu (między lupą a Elementami):

Ikona emulacji Chrome

Tryb emulacji umożliwia ustawienie rozmiaru widocznego obszaru na wszystkie popularne rozmiary ekranów urządzeń mobilnych, między innymi fajne funkcje, takie jak emulacja dotyku, geolokalizacja, a nawet dane z akcelerometru:

wprowadź opis obrazu tutaj

gl03
źródło
Co najbardziej imponujące, nie wiedziałem o tej funkcji ... wreszcie mogę pozbyć się przełącznika klienta użytkownika i poprawnie emulować urządzenia mobilne, dziękuję !! +10 do tego
andreszs
Ta funkcja została zastąpiona przez „Toggle Device Toolbar” stackoverflow.com/a/44194243/1175496
The Red Pea
6

Dodając do tego, co powiedziały nayan9 i drinkdecaf, możesz po prostu wrzucić document.URL do wywołania window.open, aby zobaczyć stronę, którą obecnie przeglądasz w oknie 320. Możesz chcieć dodać trochę więcej do szerokości, jeśli spodziewasz się paska przewijania.

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
zero
źródło
3

DevTools w Chrome znacznie się rozwinęły od momentu opublikowania większości tych odpowiedzi. Najlepszym sposobem rozwiązania tego problemu jest teraz użycie emulatorów wbudowanych w Chrome.

Aby użyć emulatorów, otwórz DevTools (naciśnij F12), a następnie kliknij następującą ikonę, aby przełączyć Device Toolbar:

Przycisk devtools

Umożliwi to emulację dowolnego urządzenia mobilnego lub rozmiaru widocznego obszaru.

Mike Poole
źródło
2

w chrome problem powoduje ikony twoich dodatków w prawym górnym rogu

-> zmień rozmiar paska adresu (w którym wpisujesz adresy URL) do maksymalnej szerokości (przeciągnij pasek przy prawej krawędzi w prawo)

lub wyłącz ikony

Tamer Güner
źródło
2

Jestem leniwy, żeby było jeszcze łatwiej, niech bookmarklet zapyta użytkownika o rozmiary :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()
Rob Boerman
źródło
1

Miałem podobne problemy i właśnie znalazłem dobre obejście. Otwórz swoje chrome devtools, aw lewym górnym rogu znajduje się mały ekran i ikona iPada. Kliknij, aby otworzyć mobilny widok Twojej strony. Możesz ustawić to na predefiniowane urządzenia lub niestandardową rozdzielczość. Właściwie całkiem niezłe.

Dan Freeman
źródło
0

Innym łatwym rozwiązaniem jest kliknięcie Strg + Shift + N, aby przejść do trybu incognito. Tam możesz dowolnie zmieniać rozmiar okna przeglądarki.

numer 5
źródło
2
Na Macu 10.9 Chrome 38.0.2125.104 tak nie jest
geotheory
1
W systemie Linux Chromium 44.0.2403.89 też tak nie jest
Ikar Pohorský
W systemie Windows 8 Chrome w wersji 74.0.3729.131 (oficjalna kompilacja) (wersja 64-bitowa) tak nie jest
The Red Pea
0

Podoba mi się to narzędzie, ponieważ umożliwia szybkie przełączanie się, a także łatwe przełączanie między orientacją pionową / poziomą w przypadku rozmiarów mobilnych. Pozwala również na tworzenie spersonalizowanych zakładek let, więc jeśli często projektujesz dla niejasnych rozdzielczości, możesz je zapisać i używać.

Musiałem użyć jednego z tych narzędzi, ponieważ nawet z powyższą odpowiedzią nie mogłem poprawnie skalować mojego okna do 320, to narzędzie wydaje się ogólnie szybszym rozwiązaniem.

http://lab.maltewassermann.com/viewport-resizer/

Christos Hrousis
źródło
0

Zawsze napotykam ten problem z przypiętymi kartami. Chrome nie zmieni rozmiaru poniżej poziomej szerokości ośmiu widocznych przypiętych zakładek, jeśli takie istnieją! Po prostu odłącz kartę, której rozmiar chcesz zmienić, aby rozwiązać ten problem ...

Markus
źródło
0

To jest mój pierwszy wkład w społeczność stackoverflow i jego wysiłek, aby dać Wam wszystkim wspaniałych ludzi, którzy uczynili internet tak potężnym narzędziem. A teraz odpowiadam: Safari ma tę fajną funkcję. Musisz aktywować opcję programisty Safari w preferencjach. Zrzut ekranu przedstawiający konfigurację preferencji w Safari, aby aktywować menu programisty

Po aktywacji możesz uzyskać dostęp do wielu bardzo potężnych narzędzi programistycznych. Jednym z tych narzędzi jest regulacja Viewport, za pomocą której można przetestować responsywny układ witryny. Aby aktywować responsywne testowanie układu, można użyć skrótu Cmd + ctr + R, aby aktywować opcję dostosowania portu widoku safari. Zapewni to wystarczającą kontrolę, aby przetestować witrynę internetową przy różnych rozmiarach portów wyświetlania.

Zrzut ekranu przedstawiający wygląd okna przeglądarki po włączeniu opcji testu responsywnego układu.

  1. Link do sposobu aktywacji menu programisty w safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
Dr Gaurav Gupta
źródło
-4

Wiele smartfonów skaluje stronę, aby dopasować ją do rozmiaru ekranu za pomocą powiększania. Twoja minimalna szerokość strony to prawdopodobnie 400 pikseli. Bez przykładowego kodu myślę, że to wszystko, co można powiedzieć.

user372719
źródło