Mon Dec 11, 2017 8:06 pm
You can use either of the 2 main browsers, Firefox or Chrome. These instructions are only for responsive sites, not Mobilize It sites.
1. In Firefox, open a page showing your site.
Then go to
Tools > Web Developer > Responsive Design Mode
The display on the page changes like this. In the little bar at the top of the image, (it's very little) are 2 arrows for a drop down menu.
When you open it, you can select from a number of devices. The footprint of your site will change to that of the device you've chosen. The columns will reflow, and you'll see what it looks like on a smartphone or tablet.
Firefox Add-Ons also has a number of extensions, but none of them are compatible with the latest version of Firefox Quantum, at the moment. I'm sure they'll catch up eventually.
2. In Chrome.
The easiest way to do this is to load a Chrome extension This is something you add to your browser, and it appears as a button on your toolbar. You press the button, and a list of devices opens up. You choose the device you want, portrait or landscape and a second window opens showing you what your site looks like on that phone.
First, you have to install the extension.
Go to this address on the Chrome Webstore.
Press "Add to Chrome" in the top right corner.
The extension will install in your browser and a small icon will appear to the right of the URL bar. This is the icon.
When you press the icon, a window will open up with a list of devices. The first one is for the iPhone 6.
Press either the portrait icon or landscape symbol on the right hand side, and a second window opens up that is the right size for an iPhone 6.
You can drag that window around your screen to where you want it. You can press the menu button on your site, or move from page to page to see what everything looks like on a phone. You can check how the responsive grids are behaving, and what the images look like.
In real life, the AddThis buttons are slightly higher up the screen, but otherwise this is a good substitute if you don't have a phone of your own. You can also choose iPad or one of the Samsung tablets to see what your site looks like on tablets.