Viewport là gì?

Scrapeless Agent Browser cung cấp các môi trường trình duyệt được quản lý, trong đó cấu hình viewport và hiển thị ảnh hưởng đến bố cục trang và kết quả được chụp lại.

Viewport là vùng mà qua đó trình duyệt hiển thị một tài liệu. Trong phát triển web, thuật ngữ này có thể mô tả không gian dùng để dàn trang hoặc phần của bố cục đó hiện đang hiển thị. Các vùng này thường giống nhau trên trình duyệt desktop, nhưng có thể khác nhau khi thu phóng trên di động và các thay đổi hiển thị khác.

Viewport khác với màn hình vật lý, toàn bộ cửa sổ trình duyệt, kích thước đầy đủ của tài liệu và kích thước của mọi ảnh chụp màn hình có thể có. Phân biệt các phép đo đó giúp giải thích vì sao một trang responsive thay đổi điều hướng, vì sao thu phóng có thể che khuất một phần bố cục và vì sao ảnh chụp toàn trang có thể cao hơn rất nhiều so với vùng trình duyệt đang thấy.

Layout viewport xác định không gian làm việc của trang

Layout viewport cung cấp không gian tham chiếu để dàn bố cục nội dung trang. Các quy tắc responsive và hình học của tài liệu phụ thuộc vào môi trường đó, nên thay đổi kích thước viewport có thể thay đổi chính giao diện.

Mô hình hình học CSSOM View định nghĩa các khái niệm đo lường trình duyệt và tài liệu được ứng dụng web sử dụng. Các phép đo này không thể dùng thay thế cho nhau chỉ vì nhiều phép đo cùng chứa từ width hoặc height.

Hãy xét một site hiển thị một hàng liên kết điều hướng khi có đủ không gian ngang. Trong bố cục hẹp hơn, nó có thể thay những liên kết đó bằng một nút menu. Một bộ định vị tự động được viết cho bố cục rộng có thể thất bại trong bố cục hẹp dù ứng dụng vẫn hoạt động đúng.

Nội dung có thể vượt ra ngoài viewport. Một bài viết dài chiếm nhiều không gian dọc trong tài liệu hơn phần trình duyệt hiện đang hiển thị. Cuộn chỉ thay đổi phần đang xem; nó không biến toàn bộ chiều cao tài liệu thành chiều cao viewport. Tràn ngang cũng cần được chú ý tương tự vì nội dung bị ẩn có thể cho thấy hoặc là cuộn có chủ đích hoặc là một vấn đề về bố cục.

Visual viewport mô tả vùng hiển thị

Visual viewport mô tả phần của bố cục hiện đang hiển thị cho người dùng. Sự phân biệt này đặc biệt quan trọng khi thao tác thu phóng bằng hai ngón trên di động làm thay đổi lượng nội dung trang nằm vừa trên màn hình.

Các khái niệm layout viewport và visual viewport giải thích vì sao phóng to vào một trang không đơn giản có nghĩa là toàn bộ trang được dàn cho một thiết bị hẹp hơn. Người dùng có thể xem một phần nhỏ hơn của bố cục sẵn có.

Bàn phím trên màn hình và các thay đổi giao diện trình duyệt cũng có thể ảnh hưởng đến vùng hiển thị, với hành vi tùy thuộc môi trường và cấu hình. Một điều khiển cố định có thể tồn tại trong tài liệu nhưng vẫn bị che khuất trong trạng thái tương tác hiện tại. Hãy kiểm thử trạng thái quan trọng, đặc biệt khi người dùng phải hoàn thành một biểu mẫu trên màn hình nhỏ.

Để chẩn đoán, hãy ghi lại loại phép đo bạn đang dùng. Một báo cáo chỉ nói “chiều cao đã thay đổi” vẫn bỏ ngỏ việc bố cục, vùng hiển thị, hình học màn hình hay nội dung tài liệu đã thay đổi. Gọi tên phép đo khiến vấn đề hiển thị có thể tái tạo được.

Pixel CSS không nhất thiết là pixel thiết bị

Pixel CSS là đơn vị dùng cho bố cục web, trong khi pixel thiết bị mô tả màn hình raster hoặc bề mặt xuất. Mối quan hệ giữa chúng phụ thuộc vào thiết lập tỷ lệ của môi trường và cách thức chụp.

Các đơn vị độ dài CSS và đơn vị viewport định nghĩa các đơn vị sẵn có cho stylesheet. Một kích thước CSS không nên được hiểu là số lượng pixel hiển thị vật lý đảm bảo trong mọi môi trường.

Sự phân biệt này quan trọng với ảnh chụp màn hình. Kích thước raster của một hình ảnh có thể phản ánh tỷ lệ thiết bị ngoài kích thước viewport được yêu cầu. So sánh hai ảnh chụp màn hình mà không xét đến tỷ lệ có thể khiến cùng một bố cục trông như đã đổi kích thước.

Hãy coi kích thước màn hình, kích thước viewport và tỷ lệ là các đầu vào riêng biệt trong một kiểm thử hiển thị. Trình duyệt desktop được thu hẹp vùng nội dung có thể kiểm thử bố cục responsive, nhưng điều đó một mình không tái tạo mọi thuộc tính của một thiết bị di động vật lý. Hành vi chạm, điều khiển trình duyệt và tương tác đặc thù thiết bị cần được đánh giá riêng.

Đơn vị chiều cao viewport mô tả các điều kiện hiển thị khác nhau

Các đơn vị CSS tương đối với viewport cho phép stylesheet phụ thuộc vào kích thước viewport của trình duyệt, và các đơn vị viewport hiện đại phân biệt các điều kiện hiển thị khác nhau. Chúng nên được chọn xoay quanh hành vi bố cục dự định thay vì dùng như các chữ viết tắt có thể hoán đổi.

Một panel cao toàn màn hình minh họa vấn đề. Các điều khiển trình duyệt có thể mở rộng hoặc thu gọn khi người dùng di chuyển qua một trang trên di động. Một panel cần giữ ổn định và một panel cần bám theo không gian hiện có sẽ có yêu cầu khác nhau. Việc chọn đơn vị phù hợp là một phần của quyết định thiết kế.

Hãy kiểm thử tương tác thay vì chỉ ảnh chụp ban đầu. Mở điều hướng, focus vào một trường, cuộn qua nội dung và kiểm tra xem các điều khiển quan trọng có vẫn dùng được hay không. Một trang có thể trông đúng lúc tải nhưng lại cắt mất nút gửi sau khi bàn phím xuất hiện.

Với các kiểm tra tự động, hãy ghi rõ trạng thái trình duyệt và hiển thị nào đang được thể hiện. Một kiểm thử viewport có kiểm soát xác lập hành vi trong môi trường đó. Nó không nên được mô tả như bằng chứng rằng giao diện hay bàn phím của mọi trình duyệt di động đều hành xử giống hệt nhau.

Phạm vi ảnh chụp màn hình trả lời một câu hỏi khác

Phạm vi ảnh chụp màn hình quyết định phần nào của trang trở thành hình ảnh. Ảnh chụp viewport, ảnh chụp toàn trang và ảnh chụp một phần tử đều có thể đúng đồng thời tạo ra các bằng chứng rất khác nhau.

Một ảnh chụp viewport hiển thị vùng đang nhìn thấy tại vị trí cuộn hiện tại. Nó hữu ích để chẩn đoán các lớp phủ và những gì người dùng có thể nhìn thấy trước khi cuộn. Ảnh chụp toàn trang bao phủ một phạm vi tài liệu lớn hơn được công cụ hỗ trợ. Ảnh chụp phần tử tập trung vào một thành phần và có thể bỏ qua ngữ cảnh xung quanh giải thích một sự che khuất.

Xác định câu hỏi trước khi chọn hình ảnh. Để so sánh kiểu chữ của thẻ sản phẩm, một ảnh chụp thành phần có thể là đủ. Để chẩn đoán banner chấp thuận đang che điều khiển mua hàng, hãy giữ lại vùng trang xung quanh. Để lưu trữ một tài liệu dài, ảnh toàn trang có thể hữu ích, nhưng nó không chứng minh rằng mọi phần tử ngoài màn hình đã được truy cập hoặc mọi mục tải lười đã được điền.

Chụp sau khi nội dung liên quan đã sẵn sàng. Phông chữ, hình ảnh, dữ liệu bất đồng bộ và hoạt ảnh có thể thay đổi hình học. Hai ảnh chụp màn hình có cùng kích thước danh nghĩa có thể thể hiện các trạng thái ứng dụng khác nhau, khiến khác biệt trực quan của chúng gây hiểu nhầm.

Kiểm thử đáp ứng nên tuân theo các breakpoint nội dung

Kiểm thử đáp ứng nên bao quát các điểm nơi giao diện thay đổi và nội dung trở nên khó sử dụng. Một danh sách ngắn các tên thiết bị phổ biến không thể thay thế cho những ranh giới đặc thù của ứng dụng đó.

Kiểm tra bố cục ngay dưới và ngay trên một breakpoint quan trọng. Kiểm tra nhãn điều hướng dài, giá trị bảng dài bất thường, văn bản đã dịch và trạng thái trống. Những biến thể này có thể làm lộ tràn mà một bản ghi điển hình không bao giờ bộc lộ.

Một kết quả hữu ích bao gồm việc văn bản có còn đọc được không, điều khiển có còn truy cập được không, và cuộn có chủ đích có nằm bên trong vùng chứa dự định của nó không. Thanh cuộn ngang ở cấp trang có thể cho thấy một phần tử đã thoát khỏi ranh giới bố cục của nó. Hãy kiểm tra phần tử chịu trách nhiệm thay vì che giấu triệu chứng bằng một thiết lập trình duyệt không liên quan.

Frame có ranh giới bố cục riêng

Một frame nhúng có một tài liệu mà viewport của nó liên quan đến vùng khả dụng riêng của frame. Một trang cha rộng có thể chứa một ứng dụng nhúng hẹp, nên chỉ kiểm thử viewport cấp cao nhất sẽ bỏ sót một phần của vấn đề bố cục.

Mô hình HTML iframe định nghĩa một tài liệu nhúng thay vì nội dung tài liệu cha thông thường. Tài liệu con có thể có bố cục đáp ứng và hành vi cuộn riêng.

Đối với một widget nhúng, hãy ghi lại cả bố cục cấp cao nhất và kích thước của frame. Một ứng dụng con có thể hiển thị điều hướng thu gọn vì frame của nó hẹp, dù cửa sổ trình duyệt rộng. Thay đổi viewport cha có thể thay đổi hoặc không thay đổi frame, tùy vào bố cục nhúng.

Lập kế hoạch viewport trong Scrapeless Agent Browser

Scrapeless Agent Browser cung cấp quyền điều khiển môi trường trình duyệt thông qua phần cấu hình đã được lập tài liệu. Cần tham khảo Agent Browser display and fingerprint configuration khi lập kế hoạch các thiết lập liên quan đến màn hình; một thuộc tính màn hình và một viewport trang vẫn phải được xem là các khái niệm riêng biệt.

Hãy sử dụng Agent Browser platform cho một tác vụ kết xuất được xác định, và đặt viewport thực tế thông qua bề mặt client được hỗ trợ. Kiểm tra Scrapeless pricing so với khối lượng công việc cần thiết để tạo ra bằng chứng dự định.

Phần thảo luận về iframe extraction with Playwright and Scrapeless bổ sung ngữ cảnh cho các tài liệu nhúng. Bài viết này không báo cáo một bài kiểm thử giả lập thiết bị hoặc một so sánh ảnh chụp màn hình đã thực thi; các ví dụ của nó giải thích cách chỉ định điều đó cho đúng.

Kết luận

Viewport là một ranh giới trình bày của trình duyệt, và ý nghĩa của nó phụ thuộc vào việc nội dung thảo luận liên quan đến bố cục hay khả năng hiển thị hiện tại. Hãy ghi lại cùng nhau kích thước viewport, tỉ lệ, vị trí cuộn, phạm vi ảnh chụp và trạng thái sẵn sàng của trang. Những đầu vào đó cho phép một kết quả trực quan mô tả trạng thái giao diện thực tế thay vì một kích thước hình ảnh mơ hồ.