Question

I have a webpage not rendering properly on mobile and Apple devices, and I have made an alternate version for them. How can I, preferably with html only, make those devices load the alternate version when accessing the main one?

Answer 1

If you have access to the logic side of the site (php/javascript), you can implement a check to see if the User Agent string the browser sends in their request, contains “iPhone”, “iPad”, or “Android”. Next you can redirect to this other page by using the “Location” response header. For example:

JavaScript:

if( navigator.userAgent.match(/iPhone/i) ) { 
    window.location = "http://address.to.your.mobile.site/";
} 

PHP:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false) {
    header('Location: http://address.to.your.mobile.site/');
}

I’d prefer the PHP solution:
the browser sends a request to the webserver. The webserver will see the user agent is a mobile device and redirect to the correct page.
As where the JavaScript solution will request the webpage, receive it, load the JavaScript and send a new request to the webserver. (I believe it happens like this, please correct me if I’m wrong)

Plus, as you have mentioned in the comments, not every user has their JavaScript enabled in their browser.