Tag Archives: responsiveCSS

Mobile layout bookmarklets

I often need to view a web page I’m viewing on my desktop as I was on a mobile screen.
I used to manually resize the browser but I could not have a reference on which size should have the browser to be like a tablet or a smartphone.
So I’ve done myself some simple bookmarklets that open the page I’m viewing in a browser page of the correct size.
Here they are:

phone portrait (320×480)

phone landscape (480×320)

iPad landscape (1024×768)

iPad portrait (768×1024)

laptop 1440×960

If you think they can be useful drag them to your bookmarks bar.
I use to put them in a “Screens” folder in my bookmarks bar.

If just resizing the browser isn’t enough and I really want to know how a webpage is viewed on a smartphone and don’t want to write the entire URL with the uncomfortable virtual QWERTY, I show a QR code of the current page by using this bookmarklet:

to qr

After i did them I found Bricss uses a similar way to show how the webpage appears in different screen sizes.
That’s interesting too, because it allows you to see how a webpage appears on different screens at once.