Trình duyệt không có tỷ lệ dưới 400px?

Tôi đang làm việc để tạo ra một tấm phong cách lỏng và nó hoạt động tuyệt vời. Một điều mà tôi nhận thấy là cửa sổ trình duyệt của tôi trong Chrome sẽ không thay đổi kích thước dưới 400px, nó chỉ bị kẹt ở đó và trong FF khi tôi thu nhỏ nó xuống, nó chỉ dừng lại ở khoảng 400px và sau đó bật một thanh cuộn ngang.

Khi tôi mở trang web trên điện thoại của mình, nó trông hoàn hảo ở khoảng 320px, vì vậy tôi biết nó có tỷ lệ thấp hơn 400px.

Tôi tò mò liệu có ai biết đây là trình duyệt / máy tính để bàn hay tôi nên xem xét thứ gì khác ngoài CSS của tôi. Tôi không có bất kỳ tuyên bố chiều rộng tối thiểu nào vì vậy tôi không chắc điều gì có thể gây ra điều này.

Một lần nữa trên máy tính để bàn, nó thu nhỏ xuống chiều rộng tối thiểu khoảng 400px và dừng lại, nhưng khi tôi mở nó lên trên điện thoại của mình, nó sẽ thu nhỏ kích thước của màn hình điện thoại khoảng 320px ... tò mò tại sao ít nhất nó lại thắng quy mô xuống tới 320px trên máy tính để bàn.

-edit- Ngoài ra tôi không chắc điều này có quan trọng không nhưng Opera cho phép nó thu nhỏ lại gần như không có gì ... Vậy nó hoạt động với Opera chứ không phải trong Chrome hay FF ​​... có ý tưởng nào không?

Chrome không thể thay đổi kích thước theo chiều ngang dưới 400px (OS X) hoặc 218px (Windows) nhưng tôi có một giải pháp thực sự đơn giản cho vấn đề:

1. Dock thanh tra web sang phải thay vì xuống dưới cùng
2. Thay đổi kích thước bảng điều khiển - bây giờ bạn có thể làm cho khu vực trình duyệt thực sự nhỏ (xuống 0px)

Cập nhật: Chrome hiện cho phép bạn sắp xếp các cửa sổ thanh tra theo chiều dọc khi được neo sang phải! Điều này thực sự cải thiện bố cục.

Các bảng HTML và CSS rất phù hợp và thậm chí bạn cũng mở một bảng điều khiển nhỏ. Điều này đã cho phép tôi chuyển hoàn toàn từ Firefox / Fireorms sang Chrome.

Nếu bạn muốn tiến thêm một bước, hãy xem các cài đặt của trình kiểm tra web (biểu tượng răng cưa, góc dưới bên phải) và chọn tab tác nhân người dùng . Bạn có thể đặt độ phân giải màn hình thành bất cứ thứ gì bạn thích ở đây và thậm chí nhanh chóng chuyển đổi giữa dọc và ngang.

CẬP NHẬT : Đây là một công cụ thực sự tuyệt vời mà tôi đã đi qua. http://lab.maltewassermann.com/viewport-resizer/

điều này có thể là do các addon bạn đã cài đặt trên trình duyệt của bạn. xóa hoặc ẩn tất cả các biểu tượng addon khỏi thanh công cụ và thử kích thước lại. khi có trình duyệt addons chỉ thay đổi kích thước thanh địa chỉ và giữ cho các addon hiển thị.

Cập nhật: 14/07/2013

Với phiên bản chrome mới nhất, giờ đây bạn có thể thay đổi kích thước thanh địa chỉ và nó sẽ tự động ẩn các addon.

Tôi cũng bị bối rối nhưng kết thúc với một giải pháp đơn giản. Tôi vừa tạo một tệp HTML có liên kết để mở một cửa sổ mới:

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

Cửa sổ mới này không có gì ngoài thanh địa chỉ và Chrome cho phép tôi tự do thay đổi kích thước này xuống 111x80.

Giải pháp của nayan9 hoạt động rất tốt và có thể được đặt vào một dấu trang mà không cần phải tạo tệp html. Trong Chrome, tạo dấu trang mới bằng URL:

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

Và đặt cho nó một cái tên "Mở cửa sổ nhỏ" hoặc một cái gì đó tương tự. Điều này sẽ cho phép bạn dễ dàng mở các cửa sổ mà không bị giới hạn kích thước trong chrome. Lưu ý rằng chỉ cần sao chép này vào thanh địa chỉ của bạn sẽ không hoạt động - chrome loại bỏ "javascript:".

Trong trường hợp bạn muốn giảm chiều rộng màn hình để mô phỏng các thiết bị khác nhau (và tại sao bạn lại muốn làm điều này?):

Chrome hiện có phần Thi đua trong trình kiểm tra, được kích hoạt bằng cách nhấp vào biểu tượng điện thoại nhỏ ở thanh menu trên cùng (giữa kính lúp và các thành phần):

Chế độ mô phỏng cho phép bạn đặt kích thước chế độ xem thành tất cả các kích thước màn hình di động phổ biến, trong số các tính năng hay khác, như cảm ứng mô phỏng, định vị địa lý và thậm chí đầu vào gia tốc kế:

Thêm vào những gì nayan9 và drinkdecaf đã nói, bạn chỉ cần ném tài liệu.URL vào cuộc gọi đến window.open để xem trang bạn đang xem trong cửa sổ 320. Bạn có thể muốn thêm một số chiều rộng nếu bạn đang mong đợi một thanh cuộn.

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

Các DevTools trong Chrome đã chuyển từ đáng kể khi hầu hết các câu trả lời này được đăng. Cách tốt nhất để giải quyết vấn đề này bây giờ là sử dụng trình giả lập được tích hợp trong Chrome.

Để sử dụng trình giả lập, mở DevTools (nhấn F12) và sau đó nhấp vào biểu tượng sau để chuyển đổi Device Toolbar:

Điều này sau đó sẽ cho phép bạn mô phỏng bất kỳ thiết bị di động hoặc kích thước khung nhìn nào bạn muốn.

trong chrome các biểu tượng của addon của bạn ở góc trên bên phải gây ra sự cố

-> thay đổi kích thước thanh địa chỉ (nơi bạn nhập các url) thành chiều rộng tối đa (kéo thanh ở cạnh phải sang phải)

hoặc vô hiệu hóa các biểu tượng

Tôi lười biếng, để làm cho nó dễ dàng hơn nữa, hãy để bookmarklet hỏi người dùng về kích thước :-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);})()

Tôi tìm thấy một cách giải quyết nhanh chóng cho việc này.

Chỉ cần cài đặt Tiện ích bổ sung thiết kế web đáp ứng cho Chrome và nó sẽ mở một cửa sổ riêng mà không có thanh địa chỉ và tab, có thể thu nhỏ xuống còn 10 px hoặc ít hơn.

Liên kết tại đây: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

Tôi đã gặp vấn đề tương tự và chỉ tìm thấy một công việc tốt xung quanh. Mở devtools chrome của bạn và ở trên cùng bên trái, có một màn hình nhỏ và biểu tượng ipad. Nhấp vào đó và nó sẽ mở ra một cái nhìn di động của trang của bạn. Bạn có thể đặt nó thành các thiết bị được xác định trước hoặc độ phân giải tùy chỉnh. Khá tiện lợi thực sự.

Một giải pháp dễ dàng khác là nhấp vào Strg + Shift + N để vào Chế độ ẩn danh. Ở đó bạn có thể thay đổi kích thước cửa sổ Trình duyệt của bạn như bạn muốn.

Tôi thích công cụ này vì nó cho phép bạn chuyển đổi nhanh chóng và cũng dễ dàng chuyển đổi giữa chiều dọc / ngang cho kích thước di động. Nó cũng cho phép bạn tạo một dấu trang cá nhân hóa, vì vậy nếu bạn thiết kế cho các độ phân giải tối nghĩa thường xuyên, bạn có thể lưu chúng và sử dụng chúng.

Tôi đã phải sử dụng một trong những công cụ này bởi vì ngay cả với câu trả lời ở trên, tôi không thể mở cửa sổ của mình lên đúng 320, công cụ này dường như là một giải pháp nhanh hơn nói chung.

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

Tôi luôn luôn gặp phải vấn đề này với các tab được ghim. Chrome sẽ không thay đổi kích thước dưới độ rộng ngang của tám tab được ghim có thể nhìn thấy nếu có! Chỉ cần tách tab mà bạn muốn thay đổi kích thước để giải quyết điều này ...

Đây là đóng góp đầu tiên của tôi cho cộng đồng stackoverflow và nỗ lực của tôi để trả lại cho tất cả các bạn những người tuyệt vời đã biến internet thành một công cụ mạnh mẽ như vậy. Bây giờ với anser: Safari, có tính năng thú vị này. Bạn cần kích hoạt tùy chọn nhà phát triển safari trong tùy chọn. Ảnh chụp màn hình thiết lập tùy chọn trong Safari để trình đơn nhà phát triển Actiave

Sau khi kích hoạt, bạn có thể truy cập vào một loạt các công cụ phát triển rất mạnh. Một trong những công cụ này là điều chỉnh Viewport có thể được sử dụng để kiểm tra bố cục phản hồi trang web của bạn. Để kích hoạt thử nghiệm layive responsive, người ta có thể sử dụng Cmd + ctr + R cắt ngắn để kích hoạt tùy chọn điều chỉnh cổng xem safari. Điều này sẽ cung cấp cho bạn đủ quyền kiểm soát để kiểm tra trang web của bạn trên các kích cỡ cổng xem khác nhau.

Ảnh chụp màn hình cửa sổ trình duyệt của bạn sẽ trông như thế nào sau khi tùy chọn kiểm tra bố cục đáp ứng được kích hoạt.

1. Liên kết với cách kích hoạt menu nhà phát triển trong safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

Rất nhiều điện thoại thông minh chia tỷ lệ trang để vừa với kích thước màn hình của chúng bằng cách thu phóng. Chiều rộng trang tối thiểu của bạn có lẽ là 400px. Không có bất kỳ mã ví dụ nào, tôi nghĩ đó là tất cả những gì có thể nói.