Jump to content

SS 7.1 - how to redirect only mobile devices to custom URL (duplicated desktop home page formatted for mobile devices only - fluid engine)

Recommended Posts

Site URL: http://worksbyshaun.com

Hello and thank you for your help....

I am having to make a duplicate of my HOME page (WIP - redoing it using Fluid Engine), so it can be edited specifically for mobile devices, because currently there is one huge layout mess of content that appears on any mobile device - it does not resemeble the desktop version at all. Also, If you edit the desktop page in the mobile view and change anything to work on mobile, then it completely messes up the desktop page layout, extremely frustrating.

To get around this, I will create a duplicate of my new HOME page, and change the URL to http://worksbyshaun.com/mobile. Then I will edit this page so it works only on a mobile device. This way the edits won't mess up my main desktop HOME page version.

I am leaving the rest of my website as is, with the classic editor layouts, as these work on mobile devices. It's the new Fluid Engine that completely breaks anything on a mobile device. I need some of the new features present in Fluid Engine just for my new HOME page, hence why this workaround.

What custom code would I add to the "Advanced" default (desktop) HOME page section to accomplish this? Something like this....?

@media (max-width:768px){http://worksbyshaun/mobile {display:none!important}}

 

Also, I wish to hide this custom mobile HOME page from Google search engines, as it's just a duplicate. Will this cause any indexing issues with my main desktop site and Google search engine? I don't want to mess with my sites main landing page and Google searches.

Many thanks for your help.

Edited by Shaun_mav
Link to comment

#1. Add this to Page Header

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://google.com";
}
</script>

The code will redirect page to new url (you can replace google.com with new mobile page url) when users on mobile.

#2. Add to Page Header

<meta name="robots" content="noindex" />

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 7/18/2022 at 1:31 AM, tuanphan said:

#1. Add this to Page Header

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://google.com";
}
</script>

The code will redirect page to new url (you can replace google.com with new mobile page url) when users on mobile.

#2. Add to Page Header

<meta name="robots" content="noindex" />

 

Hey @tuanphan, is something like this possible for detecting only Android users?

I have a client trying to redirect users to a different page, but only if they're on an Android device. Thanks!

Link to comment
On 2/23/2024 at 4:30 AM, PatrickJ said:

Hey @tuanphan, is something like this possible for detecting only Android users?

I have a client trying to redirect users to a different page, but only if they're on an Android device. Thanks!

Try this

<script>
  var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
  window.location = 'http://android.davidwalsh.name';
}
</script>

Reference: https://stackoverflow.com/questions/6031412/detect-android-phone-via-javascript-jquery

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.