Làm thế nào để mô phỏng một màn hình có độ phân giải cao hơn? [đóng cửa]


94

Có cách nào để trình duyệt kiểm tra trang web của tôi ở độ phân giải cao hơn màn hình của tôi không?

Vd: Tôi có màn hình 1440 x 900, và tôi muốn kiểm tra trang web ở 1920 x 1200, 1920 x 1080, v.v.


@deceze thực sự đó là một gợi ý rất tốt. Toàn bộ điểm nổi bật của những thứ như 960.gs là bởi vì nếu bạn làm việc với kích thước pixel, thiết kế của bạn trông giống nhau ở mọi nơi, nó chỉ chiếm lượng bất động sản màn hình khác nhau dựa trên độ phân giải của màn hình. Không cần phải kiểm tra đồ họa lặp lại theo chiều ngang ở độ phân giải cao miễn là bạn có thể thấy toàn bộ 2 và một chút lặp lại để đảm bảo mọi đường nối đều thẳng hàng. Hoặc bạn có thể chỉ cần sử dụng nguyên tắc ve sầu để tạo ra một cái gì đó thú vị hơn.
Endophage

1
@Endophage: Tôi không đồng ý. Việc xây dựng bố cục linh hoạt phù hợp thường mang lại kết quả tốt hơn liên quan đến tùy chọn kích thước phông chữ của người dùng. Nhìn giống nhau ở mọi nơi không phải là điều cần thiết, nó chỉ là nhìn trộm từng pixel.
Bạn

@ Bạn tôi vẫn chưa thấy bố cục linh hoạt thay đổi kích thước phông chữ. Lưu ý rằng lý do độ rộng pixel cố định là tốt là vì mắt người phải vật lộn để quét các dòng trên một độ dài nhất định (tôi tin rằng nó được tìm thấy khoảng 20 từ ở kích thước phông chữ khoảng 12px, bạn có thể tự tra cứu). Nếu bạn đang nói về việc giảm độ phân giải điện thoại thì đó là một câu chuyện khác nhưng nếu bạn đang nói về độ phân giải máy tính để bàn / máy tính xách tay, nếu tôi chỉ có một màn hình lớn với độ phân giải cao và thay đổi kích thước cửa sổ, tôi đang thử nghiệm hiệu quả độ phân giải khác nhau.
Endophage

1
@Endophage: Do đó, nhu cầu sử dụng 40em(hoặc một phép đo tương tự), không phải 960pxlà chiều rộng của bạn. Điểm ảnh sẽ không mở rộng khi tôi quyết định kích thước phông chữ 12px của bạn quá nhỏ đối với tôi và nhấn Cmd- +. Bên cạnh đó, cửa sổ trình duyệt của tôi chỉ có kích thước 960px.
Bạn

@ Thực ra, pixel sẽ mở rộng khi bạn nhấn Ctrl/Cmd +vì đó là chức năng thu phóng. Bạn có thể thử ngay tại đây trên SO. Phần nội dung chính có chiều rộng 960px. Sử dụng thứ gì đó như 40em sẽ không thay đổi tỷ lệ với độ phân giải màn hình. emKích thước sử dụng có liên quan đến kích thước phông chữ của phần tử mẹ được kế thừa tối đa 1em / 16px ở cấp cao nhất trừ khi bị ghi đè (và xin lỗi, nó phải là 12pt chứ không phải px trong nhận xét trước đây của tôi). Đọc lên: kyleschaeffer.com/best-practices/…
Endophage

Câu trả lời:


76

[Chỉnh sửa: Kiểm tra devtools của trình duyệt trước! Như @SkylarIttner chỉ ra trong các nhận xét, các công cụ để kiểm tra thiết kế đáp ứng đã được triển khai trên hầu hết các trình duyệt kể từ khi giải pháp dưới đây được đăng. Chúng có thể là lựa chọn tốt nhất / dễ nhất hiện nay.]

Bạn có thể sửa cho tôi nếu tôi sai, chỉ cần tạo iframe với style="desired width & height"src="your/test.site"là con duy nhất của <body>. Nên hiển thị trang web như thể độ phân giải là chiều rộng / chiều cao được chỉ định và dẫn đến các thanh cuộn để kiểm tra nó.

Không tiện lợi như sử dụng bên thứ ba, phải tự thiết lập nhưng có ưu điểm là có thể kiểm tra cục bộ mà không cần kết nối internet.


5
Tại sao ... tôi phải nói, đó là thiên tài. +1
Mafia

Tất nhiên! Cảm ơn bạn! ^^
Oskar Duveborn

Tôi không thể cảm ơn đủ!
Rahman Sharif,

1
Cảm ơn cho tất cả các chàng trai phản hồi tích cực. Thật tuyệt khi biết khi nào mọi thứ hữu ích.
Cody Crumrine

1
Trong trường hợp nó có thể giúp ích cho bất kỳ ai, Đây là mã mẫu để làm những gì @Cody Crumrine đã đề xuất và là Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>
Stuart

28

Giải pháp này nhanh hơn giải pháp được đề xuất ở trên:

http://www.infobyip.com/testwebsiteresolution.php

Nó không linh hoạt như browserhots.org nhưng nhanh hơn nhiều (vài giây so với hàng đợi 45 phút).


Đây không phải là một câu trả lời tồi. Tuy nhiên, trang web đó cung cấp hoàn toàn không có gì bạn không thể tự làm bằng cách thay đổi kích thước cửa sổ trình duyệt trên bất kỳ máy tính để bàn nào. IMHO, các liên kết trên trang đó dành cho máy tính bảng và điện thoại hoàn toàn vô giá trị ... bởi vì trên một màn hình iPod nhỏ, trang web rộng 1000 pixel của tôi được Mobile Safari tự động thay đổi kích thước để hiển thị hoàn hảo.
Sparky

4
@ Sparky672, cá nhân tôi không thể thay đổi kích thước trình duyệt của mình để lớn hơn độ phân giải màn hình của tôi. OP đã yêu cầu xem 1920 trên 1440. Có thể có một cách, nhưng nó có dễ dàng như giải pháp của infobyip không? Xin lỗi nếu tôi bỏ qua điều gì đó hiển nhiên (tôi cảm thấy có thể như vậy).
Kyle

2
Cảm ơn @ Sparky672 và không có vấn đề gì. Nhưng bạn không nên xóa nhận xét của mình "trang web đó cung cấp hoàn toàn không có gì mà bạn không thể tự làm bằng cách thay đổi kích thước cửa sổ trình duyệt trên bất kỳ máy tính để bàn nào" vì điều đó không đúng?
Kyle

1
@ Sparky672, còn dọc thì sao?
Kyle

1
Tôi sử dụng chiều dọc để xem những gì nằm trên và dưới màn hình đầu tiên. Tôi kết hợp nó với StatsCounter và MouseFlow để xem tỷ lệ phần trăm khán giả xem những gì. Tôi yêu bạn Sparky! Tôi nghĩ bạn đang đọc sai giọng điệu của tôi. Và tôi muốn được hữu ích. Sẽ không có ai xem xét giải pháp mà tôi cung cấp với 0 phiếu bầu và danh sách nhận xét. Nhưng ôi thôi ...
Kyle

9

Một vài ý tưởng:

Sử dụng tính năng thu phóng của trình duyệt, 1024x768 thu phóng 50% = độ phân giải mô phỏng 2048x1536, tôi biết Chrome thay đổi kích thước hình ảnh và những thứ tương tự. Mọi thứ trở nên khó đọc, nhưng tôi cho rằng bạn đang kiểm tra vị trí và tương tự.

Ngoài ra, bạn có thể sử dụng một số chương trình ảnh chụp màn hình để chụp ảnh màn hình có độ phân giải cao hơn bình thường (ảnh chụp màn hình trên Firefox cho phép tôi làm điều này, nhưng có vấn đề về bộ nhớ với độ phân giải thực sự cao và không còn miễn phí nữa).


6

Một giải pháp, có lẽ là quá mức cần thiết, sẽ là sử dụng Xvfb : đặt độ phân giải và độ sâu màu mong muốn, tải trang của bạn trong (các) trình duyệt và chụp (các) ảnh chụp màn hình.


4

Hãy thử xemlike.us hoặc screen-resolution.com . Đó không phải là tất cả các độ phân giải khả thi nhưng ít nhất là những độ phân giải phổ biến nhất.

Tôi đã không thử chúng nhưng nó có vẻ khá thẳng về phía trước.


độ phân giải màn hình đưa ra thông báo này: "Độ phân giải màn hình của bạn quá nhỏ Cửa sổ bật lên bạn đã chọn quá lớn so với độ phân giải màn hình bạn sử dụng. Độ phân giải màn hình của bạn là 1440 pixel x 900 pixel. Cửa sổ bật lên bạn đã cố mở là 1920 pixel x 1200. "
HappyDeveloper

xem như chúng tôi ném điều này: "Bị cấm Bạn không có quyền truy cập / trên máy chủ này. Ngoài ra, lỗi 404 Not Found đã gặp phải khi cố gắng sử dụng ErrorDocument để xử lý yêu cầu. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1,4 FrontPage / 5.0.2.2635 server tại viewlike.us Cảng 80"
HappyDeveloper

2

Mặc dù điều này sẽ không cho bạn biết độ phân giải chính xác mà bạn thử nghiệm, nhưng bạn có thể sử dụng zoomcông cụ trong Chrome hoặc FF để thu nhỏ. Điều này sẽ cung cấp một ý tưởng khá chính xác về trang web trông như thế nào trên màn hình có độ phân giải cao hơn.


2

Nếu bạn thấy ổn khi chỉ nhìn thấy một ảnh chụp màn hình tĩnh của trang web của mình, tôi khuyên bạn nên http://b Browserhots.org/

Chúng cung cấp cho bạn tùy chọn để xem ảnh chụp màn hình trang web của bạn trong hầu như bất kỳ kết hợp trình duyệt / hệ điều hành nào, bao gồm khả năng chỉ định kích thước màn hình, cùng với một loạt các tùy chọn khác.

Rất đáng để đánh dấu.


1

Bạn có thể muốn thử wkhtmltoimage , có thể chụp ảnh màn hình ở độ phân giải tùy ý.

Ngoài ra, trong KDE4 có thể phóng to cửa sổ vượt quá kích thước màn hình. Tôi nghĩ rằng tôi cũng đã thấy nó trong Windows 7. Không chắc chắn về các hệ điều hành khác.


1

IE9 cho phép bạn thay đổi kích thước cửa sổ trình duyệt thành một kích thước tùy ý: Nhấn F12 để xem các công cụ dành cho nhà phát triển, vào Tools | Thay đổi kích thước và chọn kích thước ưa thích của bạn. Sau đó, sử dụng một số công cụ có thể chụp các cửa sổ ngoài màn hình nếu cửa sổ lớn hơn màn hình của bạn. Bài báo này dường như chỉ ra rằng Snagit có thể làm được điều này. Sau đó, chỉ cần nhìn vào bức ảnh đã chụp.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.