It’s always good to get a clear picture of how a new web design will look across all potential end devices before it’s deployed but unfortunately viewing such web designs and themes outside the computer environment can be tricky.
This quick and simple guide shows you how to effectively preview your MAMP localhost websites on your mobile devices. If I’m not mistaken, this would work for any WordPress site on localhost like XAMP. Enjoy.
Video Transcript
Over the weekend, I made up my mind to finally switch my website’s theme to a responsive theme. I installed MAMP on my MacBook and got to work.
One hour into working on the theme, I realized I couldn’t preview the website on my mobile devices.
This quick guide shows how I was able to fix that.
Step 1: Your devices (computer, mobile phone, and tablet) must be connected to the same wifi source or internet connection.
Step 2: You need to get your local IP address. To do this on Windows PC, do please refer to the link in the description box. See A Guide to Finding Your IP Address on Windows & Mac.
On Mac, simply go to System Preferences and launch Network. Select your internet connection and take note of the IP address that appears there. That’s your local IP address.
Enter this IP address into your mobile device’s browser and your MAMP localhost website will load up.
As you can see, the website looks a mess and this is because resources like javascript and stylesheets weren’t loaded.
To fix this, go to your WordPress dashboard, scroll down to Settings, click on General then change localhost to your local IP address. Save and you’ll be prompted to log back into your dashboard. Make sure you still remember your dashboard password.
Once logged in, reload your website on your mobile device and it should load properly now with all resources intact.
Do please share, like, and subscribe if you found this video straight to the point and super helpful. Take care guys.
You’ll also like:
Please share this article to help others. Thanks