Web Scraper Test Website

Responsive Design Test Page

This page demonstrates responsive design techniques to test width and device-specific parameters.

Page Information

This page will adapt its layout based on the viewport size and device characteristics.

Device Information

This section displays information about your current viewport and device:

Viewport Width: Loading...px
Viewport Height: Loading...px
Device Pixel Ratio: Loading...
User Agent: Loading...
Touch Support: Loading...

Breakpoint Indicators

These indicators show which CSS breakpoint is currently active:

Extra Large (≥1200px) - Currently Active
Large (992px-1199px) - Currently Active
Medium (768px-991px) - Currently Active
Small (≤767px) - Currently Active

Responsive Grid

This grid layout changes based on viewport size:

1
2
3
4
5
6
7
8
9
10
11
12

Responsive Navigation

This navigation menu switches to a hamburger menu on smaller screens:

☰ Menu
  • Home
  • About
  • Services
  • Products
  • Contact

Responsive Cards

These cards adjust their layout based on viewport size:

Card 1

This card will adjust its width based on the available space. On smaller screens, it will stack vertically.

Card 2

This card will adjust its width based on the available space. On smaller screens, it will stack vertically.

Card 3

This card will adjust its width based on the available space. On smaller screens, it will stack vertically.

Responsive Image

This image adjusts its size based on the container width:

Responsive Image

Responsive Table

This table becomes scrollable on smaller screens:

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6
Data 1-1 Data 1-2 Data 1-3 Data 1-4 Data 1-5 Data 1-6
Data 2-1 Data 2-2 Data 2-3 Data 2-4 Data 2-5 Data 2-6
Data 3-1 Data 3-2 Data 3-3 Data 3-4 Data 3-5 Data 3-6

Device Simulation

These frames simulate how content might appear on different devices:

Mobile (320×568)

Mobile View

This simulates content on a mobile device.

Mobile Content
Tablet (768×1024)

Tablet View

This simulates content on a tablet device.

Column 1
Column 2

Testing Instructions

When testing the screenshot service with this page:

  1. Take screenshots with different width values to see how the layout responds.
  2. Test with different device_type settings to see device-specific rendering.
  3. Compare screenshots with different height values.

Sample API Requests:

POST /v1.0/screenshot
{
  "url": "http://localhost:8000/responsive",
  "format": "png",
  "width": 1200,
  "height": 800
}
POST /v1.0/screenshot
{
  "url": "http://localhost:8000/responsive",
  "format": "png",
  "width": 768,
  "height": 1024,
  "device_type": "tablet"
}
POST /v1.0/screenshot
{
  "url": "http://localhost:8000/responsive",
  "format": "png",
  "width": 375,
  "height": 667,
  "device_type": "mobile"
}