Trình kiểm tra thân thiện với thiết bị di động
Free, no signup. Run this tool's seven weighted mobile-layout checks and get a 0–100 diagnostic score, plus a phone-viewport preview as separate supporting evidence.
Free, no sign-up. The analysis reads your HTML the way a mobile browser would; the screenshot renders in headless Chrome on a 390×844 iPhone-sized viewport.
Các lần kiểm tra chạy từ máy chủ của chúng tôi; chúng tôi tải URL bạn nhập và không lưu kết quả. Results are kept in a short-lived cache, not stored long-term. Anonymous aggregate stats feed our research posts; domains are counted once via an anonymized hash and never stored in the clear. Số đếm kết quả ẩn danh theo từng lần chạy có thể được dùng cho nghiên cứu tổng hợp; URL, tên miền, IP và mã định danh không bao giờ được bao gồm, và không công bố số liệu thống kê khi có dưới 100 lần chạy.
+ lưu trang web hoặc trang hiện tại. Dùng ☆ bên cạnh trang web, trang hoặc danh sách đã lưu để thêm vào mục yêu thích. Lịch sử kiểm tra gần đây hiển thị bên dưới.
Tạo danh sách có tên
Đã điền mục tiêu từ các lựa chọn cục bộ của bạn.
Hộ chiếu trang web Ngữ cảnh cục bộ cho trang đã lưu này
Dữ liệu cục bộ
Các mục tiêu đã lưu, danh sách có tên và bản tóm tắt kiểm tra gần đây chỉ được giữ trong trình duyệt này.
390×844 viewport · iPhone user agent
This is a static-analysis check plus a real render — fast and directional. It can’t see CSS applied by JavaScript frameworks at runtime, so pair a borderline score with the screenshot: if the page looks right on the phone frame, trust your eyes.
Compare a later score
Download this free analysis as a private JSON baseline, then import it after another run to see score and failing-check changes. Snapshots stay in your browser unless you choose to save a file.
Đánh giá công cụ này
What the score is made of
| Check | Threshold / points | What this free pass can confirm |
|---|---|---|
| Viewport | 30 points | width=device-width and zoom accessibility |
| Responsive CSS | 20 points | @media rules in inspected CSS |
| Fixed widths | 15 points · >400px warning | Markup-level width attributes and inline styles |
| Font sizes | 10 points · <12px warning | CSS declarations and legacy font tags |
| Tap targets / horizontal overflow | Needs a rendered layout pass | Not claimed by this free HTML score |
Viewport is 30 points
Without width=device-width, phones render your page at ~980px and shrink it to fit — every other mobile problem starts here. Disabling zoom costs points too: it’s an accessibility failure.
Layout checks
Responsive CSS (@media rules, including in external stylesheets), hard-coded widths over 400px, and sub-12px font sizes — the three classic ways a desktop layout breaks on a phone.
Delivery checks
Responsive images (srcset/<picture>), HTML page weight on mobile networks, and leftover <object>/<embed> plugin content that mobile browsers won’t run.
Giới thiệu công cụ
Kiểm tra các tín hiệu thân thiện di động trong HTML và CSS, chấm điểm có giải thích và tạo ảnh chụp điện thoại tùy chọn.
Tính năng
- Kiểm tra thẻ meta khung nhìn và khả năng thu phóng.
- Phát hiện chiều rộng cố định và cỡ chữ nhỏ.
- Đánh giá ảnh cùng CSS đáp ứng.
- Lưu mốc JSON để so sánh lần sau.
Cách hoạt động
Công cụ tải HTML và tối đa bốn bảng kiểu, kiểm tra bảy nhóm tín hiệu có trọng số rồi kết hợp thành điểm 0–100; ảnh chụp điện thoại là bước kết xuất riêng.
Giới hạn
- Phân tích tĩnh không thấy mọi kiểu do JavaScript áp dụng.
- Ảnh chụp dùng ngân sách kết xuất có giới hạn.
- Điểm là hướng dẫn, không phải tín hiệu xếp hạng của Google.
Câu hỏi thường gặp
Google đã ngừng di động-thân thiện kiểm tra; đây có phải công cụ thay thế không?
Google đã gỡ di động-thân thiện kiểm tra độc lập và báo cáo khả năng sử dụng trên thiết bị di động trong Search Console vào cuối năm 2023. Công cụ này áp dụng mô hình chẩn đoán bảy phần riêng. Các kiểm tra đó là quy tắc kinh nghiệm của sản phẩm để tìm những vấn đề có thể xảy ra với bố cục di động, không phải tiêu chí đủ điều kiện của Google hay sự thay thế cho việc kiểm thử trên thiết bị thật.
Bài kiểm tra có kết xuất JavaScript không?
Điểm 0–100 đến từ lượt phân tích tĩnh HTML và tối đa bốn biểu định kiểu, nên công cụ không thực thi JavaScript. Ảnh chụp màn hình điện thoại là bản xem trước bằng trình duyệt `Chrome` không giao diện và cung cấp bằng chứng bổ trợ hữu ích, nhưng vẫn chỉ đại diện cho một khung nhìn và một môi trường kết xuất. Nếu hai kết quả không nhất quán, hãy xem đó là tín hiệu cần kiểm tra trang và thử trên các thiết bị thật tiêu biểu.
Tại sao tôi bị trừ 30 điểm vì thẻ khung nhìn?
Kiểm tra khung nhìn chiếm 30 trong tổng số 100 điểm vì đây là thiết lập duy nhất mà mọi hành vi di động khác đều phụ thuộc vào. Nếu thiếu thẻ <meta name="khung nhìn">, điện thoại sẽ kết xuất trang ở chiều rộng khoảng 980px rồi thu nhỏ cho vừa, khiến chữ rất nhỏ và thao tác chạm dễ trượt. Cách sửa là thêm một dòng trong <head>: <meta name="khung nhìn" content="width=device-width, initial-scale=1">. Việc tắt thu phóng (user-scalable=no hoặc maximum-scale=1) vẫn giữ phần lớn điểm nhưng bị hạ xuống cảnh báo vì đó là lỗi khả năng tiếp cận.
Thế nào được xem là phần tử có chiều rộng cố định?
Kiểm tra "Nội dung vừa với khung nhìn" gắn cờ mọi phần tử có chiều rộng mã hóa cứng trên 400px, dù đến từ style:width nội tuyến hay thuộc tính width="…". Đây là những chiều rộng dễ tràn màn hình điện thoại và buộc cuộn ngang nhất. Một hoặc hai phần tử tạo cảnh báo; từ ba phần tử trở lên là không đạt. Hãy dùng max-width cùng tỷ lệ phần trăm hoặc đơn vị tương đối để các khối thu nhỏ trên màn hình nhỏ.
Ảnh chụp màn hình báo "không khả dụng" nhưng tôi vẫn có điểm; đây có phải lỗi không?
Không. Điểm số và bảy lượt kiểm tra đến từ phân tích HTML miễn phí chạy trước. Ảnh chụp màn hình điện thoại là một lượt kết xuất có định mức riêng, có thể bị bỏ qua khi đạt giới hạn chi phí tự đặt theo ngày hoặc tháng, khi trình kết xuất đang bận trong chốc lát hoặc khi trang chặn trình duyệt không giao diện. Trong mọi trường hợp, ghi chú được diễn đạt có chủ ý theo cách trung tính và điểm số không bị ảnh hưởng; kết quả phân tích không bao giờ phụ thuộc vào ảnh chụp màn hình.
Các vấn đề thường gặp và cách khắc phục
- Lỗi Thẻ meta khung nhìn bị thiếu hoặc không hợp lệ Cách khắc phục: Thêm thẻ meta khung nhìn `width=device-width` hợp lệ vào phần head HTML ban đầu.
- Cảnh báo Thiếu tín hiệu CSS thích ứng Cách khắc phục: Thêm các điểm ngắt CSS thích ứng để điều chỉnh bố cục và kiểu chữ cho khung nhìn hẹp.
- Lỗi Nội dung chiều rộng cố định vượt khung nhìn Cách khắc phục: Thay chiều rộng cố định làm vỡ khung nhìn bằng `max-width` linh hoạt, phần trăm, `grid` hoặc `flex`.
- Cảnh báo Văn bản quá nhỏ để đọc trên di động Cách khắc phục: Tăng văn bản thân trang trên di động lên kích thước cơ sở dễ đọc và tránh văn bản thiết yếu dưới 12 pixel CSS.
- Cảnh báo Hình ảnh không được định cỡ thích ứng Cách khắc phục: Giới hạn ảnh bằng `max-width:100%` và `height:auto`, đồng thời cung cấp nguồn đáp ứng khi hữu ích.
- Cảnh báo Dung lượng trang HTML cao Cách khắc phục: Xóa tải nội tuyến không cần thiết, nén tài nguyên và trì hoãn tài nguyên không trọng yếu để giảm chi phí truyền trên di động.
- Lỗi Có nội dung trình cắm không tương thích Cách khắc phục: Thay Flash, Java applet hoặc nội dung trình cắm không được hỗ trợ bằng HTML, CSS và JavaScript gốc.