Testing Webpages in Mobile Phone Mode with Firefox Developer Edition
I prefer to use Firefox Developer Edition for web development, mainly because I find Mozilla a much more likeable vendor than Google.
Unfortunately, in Firefox Developer Edition, testing pages in a simulated mobile phone mode is much more complicated than in Google Chrome, which gives you a list of ready-made presets that you simply select.
The following steps make FFDev display the web page as if it were displayed on an iPhone 6:
- in the Developer Tools panel (F12), click the little „Responsive Design Mode“ button
- above the web page viewport, enter resolution 375x667 (you can save this as a preset for future use)
- click on the little „simulate touch events“ button
- for user agent, enter:
Mozilla/5.0 (iPhone; CPU iPhone OS 8_0_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A366 Safari/600.1.4
- hit page reload (⌘R)