WAVESPEED AI KIỂM TRA RESPONSIVE Mã của bạn ở lại trên thiết bị

100% MIỄN PHÍ

Kiểm tra giao diện responsive miễn phíXem trang của bạn ở mọi kích thước màn hình cùng lúc.

Nhập địa chỉ website hoặc dán HTML và xem trang trong các khung có kích thước đúng như màn hình điện thoại, tablet, laptop và desktop thật, cạnh nhau hoặc từng cái một.
Kéo khung đến bất kỳ chiều rộng nào, xoay, nhảy giữa các breakpoint phổ biến, phát hiện nội dung tràn ngang và lưu ảnh chụp HTML của bạn.

Hơn 40 kích thước màn hìnhXem cạnh nhauTìm nội dung tràn

Không cần đăng ký Không qua proxy Không watermark

Đang tải công cụ kiểm tra…

HTML đã dán ở lại trong trình duyệt. Website được tải trực tiếp từ máy chủ của chính nó.

BA BƯỚC ĐƠN GIẢN

Cách kiểm tra thiết kế responsive

Thêm trang của bạn

Nhập địa chỉ website, hoặc chuyển sang HTML và dán mã hay mở tệp .html. Trang ví dụ cho thấy cách hoạt động.

Chọn màn hình

Xem một thiết bị và kéo các cạnh của nó, hoặc đặt điện thoại, tablet, laptop và desktop cạnh nhau. Xoay bất kỳ thiết bị nào.

Sửa và chụp lại

Đọc cảnh báo về nội dung rộng hơn màn hình, sửa HTML và xem mọi khung cập nhật, rồi lưu ảnh chụp màn hình.

Mẹo để bố cục đứng vững ở mọi kích thước

Bắt đầu từ 320 pixel

Các điện thoại hẹp nhất đang dùng rộng 320 đến 360 CSS pixel. Nếu bố cục ổn ở đó, nó sẽ ổn ở hầu hết mọi nơi.

Hãy kéo, đừng chỉ chọn thiết bị

Bố cục cũng có thể vỡ ở giữa các thiết bị. Kéo khung từ từ từ hẹp đến rộng và để ý lúc có thứ gì nhảy hoặc chồng lên nhau.

Đừng bao giờ quên thẻ viewport

Không có <meta name="viewport" content="width=device-width, initial-scale=1">, điện thoại sẽ dàn trang rộng khoảng 980 pixel và thu nhỏ đến khi chữ tí hon.

WaveSpeed AI

Từ bố cục đến hình ảnh

Khi trang đã hiển thị tốt ở mọi kích thước, hãy tạo ảnh và video ngắn cần thiết với WaveSpeed AI.

Bắt đầu sáng tạo Khám phá hơn 1.000 mô hình AI

Hơn 1.000 mô hình AI
Hình ảnh, video và 3D
Dùng bao nhiêu trả bấy nhiêu

$1 tín dụng miễn phí cho tài khoản mới đủ điều kiện. Không cần thẻ. Các công cụ tạo nội dung có yêu cầu tài khoản và credit riêng. Riêng Kiểm tra responsive thì miễn phí.

Câu hỏi thường gặp về công cụ kiểm tra responsive

Công cụ kiểm tra thiết kế responsive này có miễn phí không?

Có. Không cần tài khoản, không giới hạn thiết bị hay trang, ảnh chụp không có watermark và không cần cài đặt gì: công cụ chạy trong trình duyệt.

Làm sao kiểm tra website trên nhiều kích thước màn hình?

Nhập địa chỉ website hoặc dán HTML, rồi chọn trong hơn 40 kích thước điện thoại, tablet, laptop và desktop, từng cái một hoặc cạnh nhau. Kéo khung đến bất kỳ chiều rộng nào, xoay hoặc nhảy đến các breakpoint phổ biến.

Kích thước thiết bị chính xác đến đâu?

Mỗi khung là một viewport trình duyệt có đúng chiều rộng và chiều cao của màn hình đó tính bằng CSS pixel, nên media query, bố cục và breakpoint phản ứng giống hệt trên thiết bị đó.

Tôi có kiểm tra được HTML của mình hoặc trang chạy cục bộ không?

Có. Dán HTML hoặc mở tệp .html để xem trước ở mọi kích thước và sửa trực tiếp. Website được tải qua https; với máy chủ phát triển cục bộ, hãy dùng tunnel https hoặc dán HTML đã build.

Công cụ có tìm ra lỗi bố cục không?

Có. Trong HTML của bạn, công cụ đánh dấu các phần tử rộng hơn màn hình, nguyên nhân thường gặp khiến trang cuộn ngang trên điện thoại, và cảnh báo khi thiếu thẻ meta viewport.

Tôi có lưu được ảnh chụp màn hình không?

Có, với HTML đã dán: lưu vùng nhìn thấy hoặc toàn trang dạng PNG theo tỷ lệ pixel của thiết bị, nên khung rộng 393 pixel ở 3x cho ảnh rộng 1179 pixel.

Nhãn tỷ lệ pixel nghĩa là gì?

Điện thoại gói từ hai đến bốn pixel vật lý vào mỗi CSS pixel. Nhãn hiển thị tỷ lệ đó, và ảnh chụp HTML đã dán được lưu theo tỷ lệ này, nên có độ nét khớp với màn hình thật.

Trang của tôi có đi qua máy chủ của các bạn không?

Không. Website được trình duyệt của bạn tải thẳng từ máy chủ của chính nó vào trong các khung, không qua proxy nào. HTML đã dán và ảnh chụp ở lại trong trình duyệt; trang và cài đặt gần nhất được lưu trong bộ nhớ của trình duyệt này.

Vì sao website cứ hiện trống?

Một số trang chọn không cho hiển thị bên trong trang khác. Mở "Vì sao trang trống?" để kiểm tra header của trang, hoặc dán HTML của trang thay thế.

Tất cả công cụ miễn phí