Responsive Screenshot

Trang thật. Nó nhúng website của bạn vào bốn khung có kích thước khác nhau, nên bạn cuộn được, bấm được, điền form được ngay trong khung - không phải ảnh tĩnh. Muốn giữ lại thành ảnh thì bấm nút “Tải ảnh”, xem thêm ở câu về chia sẻ màn hình bên dưới.

Giống phần quan trọng nhất là khung nhìn: trang trong khung nhận đúng chiều rộng đó nên chọn đúng breakpoint CSS như trên thiết bị thật.

Nhưng vẫn khác ở mấy chỗ: trình duyệt vẽ trang vẫn là trình duyệt trên máy bạn, nên font, engine và phiên bản đều là của máy bạn chứ không phải Safari iOS hay Chrome Android. Không có cảm ứng thật nên mấy hiệu ứng chạm, vuốt hay hover sẽ hành xử khác. Và user agent vẫn là máy bạn - xem câu dưới.

Nhiều khả năng site đó chọn giao diện theo user agent chứ không theo chiều rộng màn hình. Trình duyệt trong khung vẫn khai báo user agent của máy tính bạn, nên máy chủ trả về bản desktop bất kể khung rộng bao nhiêu. Nếu đúng vậy thì nên chuyển sang responsive bằng media query, hoặc kiểm tra bằng chế độ giả lập thiết bị trong DevTools - chỗ đó đổi được cả user agent.

Trang này chạy trên https, mà trình duyệt cấm một trang https nhúng nội dung http - gọi là mixed content. Công cụ sẽ báo cho bạn biết khi gặp trường hợp đó. Cách xử lý là dùng bản https của site, hoặc mở thẳng trong tab mới bằng nút bên cạnh.

Được, miễn máy bạn truy cập được địa chỉ đó, vì khung tải trực tiếp từ trình duyệt của bạn chứ không đi qua máy chủ nào của tôi. Vướng duy nhất là mixed content ở câu trên: http://localhost:3000 sẽ bị chặn. Cách vòng là chạy dev server có https, hoặc mở trang công cụ này bằng bản localhost của chính nó.

Không gửi về máy chủ của nguyenlap.net. Toàn bộ xử lý nằm trong trình duyệt bạn, URL chỉ được ghi vào thanh địa chỉ để bạn copy đi chia sẻ.

Nhưng nói cho rõ: website bạn nhập thì vẫn nhận được một lượt truy cập thật từ trình duyệt bạn - kèm địa chỉ IP, cookie của chính site đó nếu bạn đang đăng nhập, và thông tin rằng lượt truy cập này đến từ nguyenlap.net. Đó là điều không tránh được khi nhúng trang thật.

Vì đó là đường duy nhất còn lại. Nội dung trong bốn khung là của website khác, và trình duyệt cấm tuyệt đối việc một trang đọc pixel của trang khác - nên mọi thư viện kiểu html2canvas đều chỉ vẽ ra được bốn ô trắng. Cách còn lại là nhờ chính trình duyệt chụp hộ, mà việc đó thì phải có bạn bấm đồng ý.

Trong hộp thoại hiện ra, hãy chọn mục thẻ này (This tab / Thẻ Chrome). Chọn cả màn hình hay một cửa sổ thì công cụ không biết trang đang nằm ở đâu trong đó để cắt đúng khung, và nó sẽ báo lại cho bạn. Ảnh được cắt đúng phần nền xám chứa bốn thiết bị, lưu thành PNG, không gửi đi đâu cả. Cách này chạy tốt trên Chrome và Edge; Firefox với Safari không cho chọn riêng một thẻ nên bạn tự chụp màn hình sẽ nhanh hơn.

Thanh cuộn là giao diện của trình duyệt chứ không phải nội dung trang, để lộ ra thì cụm thiết bị trông rất lộn xộn. Trang trong khung khác origin nên không chèn CSS vào giấu được, cách duy nhất là cắt đúng dải đó đi. Khung vẫn giữ nguyên kích thước thiết bị nên breakpoint không đổi, chỉ phần nhìn thấy hẹp và thấp hơn đúng một bề thanh cuộn. Bạn vẫn cuộn được bình thường bằng chuột hoặc ngón tay.

Có một thứ bị giấu theo đáng để bạn biết: nếu trang của bạn tự sinh thanh cuộn ngang ở một khổ màn hình nào đó, giờ sẽ không thấy nữa. Thủ phạm quen thuộc là width: 100vw - đơn vị này tính cả bề thanh cuộn dọc, nên phần tử rộng hơn vùng nội dung đúng chừng 15px và đẩy trang lòi ngang. Nghi ngờ thì mở trang trong tab mới rồi thu hẹp cửa sổ để kiểm tra.

Là các khung nhìn phổ biến tính theo pixel CSS: 390 × 844 cỡ iPhone đời gần đây, 768 × 1024 cỡ iPad dọc, 1280 × 800 cỡ laptop 13-14 inch, 1920 × 1080 cỡ màn hình rời thông dụng. Đây là con số CSS nhìn thấy, không phải độ phân giải vật lý - một iPhone 390 điểm CSS thực ra có 1170 pixel thật. Chọn xem riêng một thiết bị thì có thêm nút xoay ngang.