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

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?

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.

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.

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

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

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.

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.

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:”.

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

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:

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');})();

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:

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

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

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);})()

Znalazłem szybkie obejście tego problemu.

Po prostu zainstaluj dodatek Responsive Web Design do przeglądarki Chrome, a otworzy on osobne okno bez paska adresu i kart, które można zmniejszyć do 10 pikseli lub mniej.

Link tutaj: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

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.

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

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/

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

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/

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