Demo

NHẬP LIÊN KẾT CỦA BẠN VÀ NHẤN ENTER

Nó hoạt động như thế nào

  1. Thêm URL của bạn vào trường nhập liệu
  2. Nhấp vào GO (tải lại bản xem trước) hoặc nhấn Enter (tải lại trang)
  3. Ngưỡng mộ thành quả của bạn

Tính năng

  • http://localhost/ hoạt động nên rất tuyệt để chụp ảnh màn hình URL phát triển cục bộ
  • Gửi cho ai đó một liên kết có trang web của bạn đã được nhúng bằng cách sử dụng ?url=http://www.yoursite.com
  • Sắp xếp lại và sắp xếp lại các thiết bị bằng cách nhấp và kéo trên thiết bị

Tôi luôn cố gắng cải thiện công cụ vì vậy hãy tweet cho tôi phản hồi của bạn về lỗi và đề xuất.

Về Responsive Website Design Tester

Bài tập tiết kiệm thời gian của cho Bản tin hàng tuần của RWD

Tôi chụp rất nhiều ảnh màn hình về các điểm dừng thiết bị khác nhau cho thiết kế đáp ứng và mất một thời gian để chuẩn bị chúng. Công cụ này cho phép tôi có được những gì tôi cần một cách nhanh chóng và hy vọng nó có thể hữu ích trong việc cho khách hàng trực quan của bạn thấy ý nghĩa của thiết kế đáp ứng khi bộ sản phẩm chưa sẵn sàng.

Đây không phải là công cụ để thử nghiệm, điều thực sự quan trọng là bạn phải thực hiện điều đó trên các thiết bị thực. Thay vào đó, đây là công cụ chụp ảnh màn hình nhanh (đối với tôi) và cho phép mọi người “hiểu” những gì bạn muốn nói trong các cuộc họp với khách hàng.

Viewports

Desktop
1600x992px thu nhỏ xuống scale(0.3181)
Laptop
1280x802px thu nhỏ xuống scale(0.277)
Tablet
768x1024px thu nhỏ xuống scale(0.219)
Mobile
320x480px thu nhỏ xuống scale(0.219)

Lưu ý về các khung nhìn

Các khung nhìn tôi đã chọn dựa trên các thiết bị là một phần của bố cục PSD phản hồi mà tôi đã mua trước đó và đúng là tất cả đều là Apple. Xin lỗi tất cả những người hâm mộ Android ngoài kia, tôi chắc rằng một số bạn có ý kiến ​​cho rằng “Android có thị phần lớn hơn” nhưng mặc dù bạn đúng, tôi không có bộ hình ảnh đó khi tôi bắt đầu. Nếu có đủ mong muốn, tôi có thể tạo một bộ sản phẩm khác, nhưng tôi không chắc liệu việc thêm những sản phẩm đó có cải thiện chức năng cơ bản của công cụ hay không.

Cập nhật

  • 23/02/13 Đã cập nhật hướng dẫn để giải thích cách nhúng trang web của bạn vào liên kết và cách di chuyển và sắp xếp lại các thiết bị.
  • 23/02/13 Đã cập nhật màu nền iFrame thành #fff vì nếu không đặt màu này trên trang web được xem trước, bạn sẽ thấy hình ảnh thiết bị thay thế.
  • 11/02/13 Đã thêm một dấu kiểm để xóa dấu # ở cuối URL, vì nó làm đảo lộn bố cục.
  • 10/02/13 Đã cập nhật để nhấn enter sau khi thêm url sẽ sử dụng biến get ?url để cập nhật iframe. Điều này cũng có nghĩa là bạn có thể chia sẻ một liên kết như https://www.veospot.net/?url=http://www.veoblogger.com và nó sẽ tải liên kết lên, hữu ích cho việc gửi email cho khách hàng.
  • 09/02/13 Đã thêm jQuery UI để có thể kéo các thành phần xung quanh trang. Hãy nhớ rằng không chỉ là hình ảnh hiển thị nên bạn có thể cần phải thử nghiệm một chút với nơi bạn có thể nhấp vào. Cảm ơn VeoSpot.net.
  • 09/02/13 cập nhật bố cục để phản hồi trên mọi thiết bị (mặc dù đó chỉ là công cụ chụp ảnh màn hình), mặc dù iframe CAO HƠN NHIỀU trên máy tính bảng và iPhone so với mức cần thiết, vẫn cần phải sửa lỗi đó... cảm ơn
  • 09/02/13 Thanh cuộn đã bị xóa khỏi máy tính bảng và thiết bị di động, cảm ơn

NHẬP LIÊN KẾT CỦA BẠN VÀ NHẤN ENTER

Nó hoạt động như thế nào

  1. Thêm URL của bạn vào trường nhập liệu
  2. Nhấp vào GO (tải lại bản xem trước) hoặc nhấn Enter (tải lại trang)
  3. Ngưỡng mộ thành quả của bạn

Tính năng

  • http://localhost/ hoạt động nên rất tuyệt để chụp ảnh màn hình URL phát triển cục bộ
  • Gửi cho ai đó một liên kết có trang web của bạn đã được nhúng bằng cách sử dụng ?url=http://www.yoursite.com
  • Sắp xếp lại và sắp xếp lại các thiết bị bằng cách nhấp và kéo trên thiết bị

Tôi luôn cố gắng cải thiện công cụ vì vậy hãy tweet cho tôi phản hồi của bạn về lỗi và đề xuất.

Về Responsive Website Design Tester

Bài tập tiết kiệm thời gian của cho Bản tin hàng tuần của RWD

Tôi chụp rất nhiều ảnh màn hình về các điểm dừng thiết bị khác nhau cho thiết kế đáp ứng và mất một thời gian để chuẩn bị chúng. Công cụ này cho phép tôi có được những gì tôi cần một cách nhanh chóng và hy vọng nó có thể hữu ích trong việc cho khách hàng trực quan của bạn thấy ý nghĩa của thiết kế đáp ứng khi bộ sản phẩm chưa sẵn sàng.

Đây không phải là công cụ để thử nghiệm, điều thực sự quan trọng là bạn phải thực hiện điều đó trên các thiết bị thực. Thay vào đó, đây là công cụ chụp ảnh màn hình nhanh (đối với tôi) và cho phép mọi người “hiểu” những gì bạn muốn nói trong các cuộc họp với khách hàng.

Viewports

Desktop
1600x992px thu nhỏ xuống scale(0.3181)
Laptop
1280x802px thu nhỏ xuống scale(0.277)
Tablet
768x1024px thu nhỏ xuống scale(0.219)
Mobile
320x480px thu nhỏ xuống scale(0.219)

Lưu ý về các khung nhìn

Các khung nhìn tôi đã chọn dựa trên các thiết bị là một phần của bố cục PSD phản hồi mà tôi đã mua trước đó và đúng là tất cả đều là Apple. Xin lỗi tất cả những người hâm mộ Android ngoài kia, tôi chắc rằng một số bạn có ý kiến ​​cho rằng “Android có thị phần lớn hơn” nhưng mặc dù bạn đúng, tôi không có bộ hình ảnh đó khi tôi bắt đầu. Nếu có đủ mong muốn, tôi có thể tạo một bộ sản phẩm khác, nhưng tôi không chắc liệu việc thêm những sản phẩm đó có cải thiện chức năng cơ bản của công cụ hay không.

Cập nhật

  • 23/02/13 Đã cập nhật hướng dẫn để giải thích cách nhúng trang web của bạn vào liên kết và cách di chuyển và sắp xếp lại các thiết bị.
  • 23/02/13 Đã cập nhật màu nền iFrame thành #fff vì nếu không đặt màu này trên trang web được xem trước, bạn sẽ thấy hình ảnh thiết bị thay thế.
  • 11/02/13 Đã thêm một dấu kiểm để xóa dấu # ở cuối URL, vì nó làm đảo lộn bố cục.
  • 10/02/13 Đã cập nhật để nhấn enter sau khi thêm url sẽ sử dụng biến get ?url để cập nhật iframe. Điều này cũng có nghĩa là bạn có thể chia sẻ một liên kết như https://www.veospot.net/?url=http://www.veoblogger.com và nó sẽ tải liên kết lên, hữu ích cho việc gửi email cho khách hàng.
  • 09/02/13 Đã thêm jQuery UI để có thể kéo các thành phần xung quanh trang. Hãy nhớ rằng không chỉ là hình ảnh hiển thị nên bạn có thể cần phải thử nghiệm một chút với nơi bạn có thể nhấp vào. Cảm ơn VeoSpot.net.
  • 09/02/13 cập nhật bố cục để phản hồi trên mọi thiết bị (mặc dù đó chỉ là công cụ chụp ảnh màn hình), mặc dù iframe CAO HƠN NHIỀU trên máy tính bảng và iPhone so với mức cần thiết, vẫn cần phải sửa lỗi đó... cảm ơn
  • 09/02/13 Thanh cuộn đã bị xóa khỏi máy tính bảng và thiết bị di động, cảm ơn