https://github.com/simonw/viewport-preview

Preview a web page in a number of different viewport widths
https://github.com/simonw/viewport-preview

Last synced: 26 days ago
JSON representation

Preview a web page in a number of different viewport widths

• Host: GitHub
• URL: https://github.com/simonw/viewport-preview
• Owner: simonw
• Created: 2022-07-25T23:18:00.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-26T02:49:25.000Z (over 2 years ago)
• Last Synced: 2024-10-06T20:57:29.610Z (about 1 month ago)
• Language: HTML
• Homepage: https://viewport-preview.simonwillison.net/
• Size: 7.81 KB
• Stars: 18
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# viewport-preview

A tool for previewing a web page in a number of different viewport widths, using iframes.

Hosted here: https://viewport-preview.simonwillison.net/

Add the URL to the page to preview as the `?url=` parameter, for example:

- https://viewport-preview.simonwillison.net/?url=https%3A%2F%2Fwww.example.com%2F

The supported widths and devices are taken from the table on this page: [Adobe Experience League: Mobile viewports for responsive experiences](https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html).

## Scraping the sizes

I generated the JSON data structure in `index.html` that lists the different widths and device names by scraping the Adobe page using Pandas like this:

```python

import pandas as pd

import json

tables = pd.read_html(

    "https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html"

)

table = tables[0]

table["w"] = (

    table["Viewport Size (width x height)"]

    .str.replace("w", "")

    .str.split(" x ")

    .str[0]

    .astype(int)

)

by_widths = {}

for index, row in table.iterrows():

    width = row["w"]

    device = row["Device"]

    by_widths.setdefault(width, []).append(device)

print(json.dumps(sorted(by_widths.items()), indent=2))

```

I had to `pip install pandas lxml` before running this.