I’ve been doing responsive layouts that adapt to screens of different resolutions lately, and it’s been really painful — crossing the river by feeling for the stones. I hadn’t done this before, and I’m not all that good with the mobile side either: iPad/iPhone/Samsung…… a whole pile of different screens. How are you supposed to test them? You can’t exactly go and buy a pile of devices.
By chance I discovered that Google Chrome (the latest version) can do it by shrinking, but then another problem came up: what resolution is it? I’ve found a new method, so without further nonsense, straight to the tutorial. 1. Open the web page you want to test in Google Chrome and press F12 on the keyboard to open the page debugger 2. Click the icon in the top-right corner of the debugging tool that looks like a menu 3. At this point you’ll notice a row of English menus right next to the bottom of the browser 4. Pull the menu up and click the third menu 5. Click the phone icon below the opened menu 6. That gives you the mobile design effect 7. There are 2 places where you can choose different resolutions and the pixels that correspond to the screen 8. Next time you open it, just press F12 and then the phone icon in the top-left corner lets you switch
