Testing Mobile View

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
sizbut
Posts: 72
Joined: Fri Feb 02, 2007 11:58 pm

Testing Mobile View

Unread post by sizbut »

Has anyone got any good suggestions on how to test the phone output. Currently I have to go the whole hog of posting it to my webserver and then browsing on my mobile phone.

Using Google on local HTML I can use the developers tools to tell the HTML its running on a small screen device but its still the desktop view that gets shown.
User avatar
Tim Green
Site Admin
Posts: 23143
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Testing Mobile View

Unread post by Tim Green »

The best thing to do is set up a local Apache server that you can then access on your local WiFi network. There used to be a great little setup called Server2Go but that is no longer developed. The best setup now is probably XAMPP, which gives you Apache, PHP, MySQL, Python and a lot of other stuff all in one simple package. Download here:

https://www.apachefriends.org/index.html

Emulators don't really work for testing mobile websites, both on iOS and Android. You always get things that look and work differently, without exception.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
sizbut
Posts: 72
Joined: Fri Feb 02, 2007 11:58 pm

Re: Testing Mobile View

Unread post by sizbut »

Revisiting this yesterday and finally managed to get local desktop testing of the skins phone and tablet views working.
  1. Within Google Chrome's developer tools (Ctrl+I), display the device toolbar (Ctrl+Shift+M).
  2. Then select the required device from the toolbar and, most importantly, reload the page.
    • To get the phone skin to display, select Responsive and reload.
    • To get the tablet skin to display, select Nexus 7 and reload (you may have to edit your emulated devices list to have Nexus 7 included as an option).
    • To get the desktop skin to display, select Laptop and reload (or just close the device toolbar).
So now I can track down and remove that background gradient that appears in the tablet view.

Naturally this comes with the warnings that its just crude emulation of other devices and no substitute for actual testing on real phone and tablet devices. And if doing this to customize skins then all the warnings about having backup copies of your skins and to test test test apply.
Post Reply