Can't view localhost on mobile:

Question

I've been building a WordPress website, I set up my localhost through MAMP Pro. I've been wanting to view the website on my iPhone, but am unable to (in a manner of speaking).

I've already located my IP address, and know that I should be able to access it via Safari on my phone, but when I'm brought to the page, I get a blank screen. However, if I scroll down to the bottom of the screen I get what looks like an HTML version of my site's menu bar, although all of the menu items are overlapped. Moreover, I cannot click on any of the links, as when I take my finger off of the phone (from scrolling) everything disappears.

I would love some help. I'm really new to the non-design aspect of the web.

Answer 1

I often work on my MacBook localhost and test on iOS. Here is how I do it.

On your Mac, go to System Preferences and find your "computer name", which is probably something like "my-macbook".

Then go to your WordPress's wp-config.php and add these two lines:

define('WP_HOME','http://my-macbook.local/projectfolder/wordpress/');
define('WP_SITEURL','http://my-macbook.local/projectfolder/wordpress/');

The paths to WP_HOME and WP_SITEURL should be the same as in your General Settings in WordPress, except instead of "localhost" you're using "(your-computer-name).local".

Save the wp-config file. You'll get logged out of WordPress on your Mac, but if you connect to http://(your-computer-name).local/ on iOS, you should be able to access your site on iOS.

To get it back to normal afterwards, just comment out the two lines you added to wp-config.php.