A little browser trick I just learned

This is directly related to “responsive design”:

During the design phase and building for the various breakpoints (or screen-sizes, however you relate to that schema) I was under the impression I had to physically use my mobile device to check the results from a published site. Yes, you can the preview function in Sparkle, but that’s not the same as the site in the wild, real-world.

What I just learned is that if I squeeze the browser from wide to narrow (Firefox/Safari) I get to see all the 3 breakpoints I designed, PC-Wide down to Mobile. In fact if the browser is narrowed far enough I see exactly what the mobile version looks like on my phone, without having to use the phone.

I think it’s a neat and quick function to see how things look/work without physically fumbling around with multiple devices. No, this doesn’t replace actually using a mobile device, but it sure cuts down the post-publishing clean-up phase.


Adding to @producerguyaz…If you’re running Safari, go to the Safari menu, then Preferences, then Advance, and check the box at the bottom for “Show Develop menu in menu bar”.

Now go back up to the menu bar and select Develop and then choose Enter Responsive Design Mode. From here you will see icons for each Apple device, by screen size, and resolution. Select combinations to view your site.

But there’s more, select a browser; Safari, Edge, Chrome or Firefox (even Windows versions!) to view your site without having that browser installed on your Mac. With your site in the view window you can navigate its entirety.

To exit, go back up to the develop menu and select Exit Responsive Design Mode.