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?
źródło
Odpowiedzi:
Chrome nie może zmienić rozmiaru w poziomie poniżej 400px (OS X) lub 218px (Windows), ale mam naprawdę proste rozwiązanie problemu:
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/
źródło
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.
źródło
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:
To nowe okno ma tylko pasek adresu, a Chrome pozwala mi dowolnie zmieniać jego rozmiar do 111x80.
źródło
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:
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:”.
źródło
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:
źródło
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.
źródło
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.
źródło
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
źródło
Jestem leniwy, żeby było jeszcze łatwiej, niech bookmarklet zapyta użytkownika o rozmiary :-D
źródło
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
źródło
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.
źródło
Innym łatwym rozwiązaniem jest kliknięcie Strg + Shift + N, aby przejść do trybu incognito. Tam możesz dowolnie zmieniać rozmiar okna przeglądarki.
źródło
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/
źródło
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 ...
źródło
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.
źródło
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ć.
źródło