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

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.

#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" />

Thank you very much Tuaphan for your guidance, know your help has been greatly appreciated.

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!

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

I have been trying to implement this for a while now. 

I have been using your code:

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://alkemilondon.uk/alkemi-dog-mobile";
}
</script>

Page I want to redirect to: https://www.alkemilondon.uk/alkemi-dog-mobile

Page I want to redirect from: https://www.alkemilondon.uk/alkemi-dog

Any idea what I am doing wrong?

On 6/4/2024 at 11:18 PM, TheHouseAgency said:

I have been trying to implement this for a while now. 

I have been using your code:

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://alkemilondon.uk/alkemi-dog-mobile";
}
</script>

Page I want to redirect to: https://www.alkemilondon.uk/alkemi-dog-mobile

Page I want to redirect from: https://www.alkemilondon.uk/alkemi-dog

Any idea what I am doing wrong?

Can you keep the code in /alkemi-dog page? I can check easier

Same issue here. Stuck up now. Optimized for desktop view. Mobile view is skewed. viz versa. If I have 300 pages in my site do I have to add the code in the header for all 300 pages ? 

Followed above instructions and created a duplicate of the desktop optimised page and optimised the new page for mobile. Injected the below code into the desktop optimised page.

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://amphibian-pomegranate-kebs.squarespace.com/mob-test-2";
}
</script>

The slug mob-test-2 is the mobile optimised page.

The full page does not load. Just the page title and header logo appears in the mobile view. See attached screenshot But no 404 error either. Let me know where I am going wrong. 

On 6/28/2024 at 9:22 PM, eZeeBags said:

Followed above instructions and created a duplicate of the desktop optimised page and optimised the new page for mobile. Injected the below code into the desktop optimised page.

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "https://amphibian-pomegranate-kebs.squarespace.com/mob-test-2";
}
</script>

The slug mob-test-2 is the mobile optimised page.

The full page does not load. Just the page title and header logo appears in the mobile view. See attached screenshot But no 404 error either. Let me know where I am going wrong. 

 

What is desktop page? I can test easier

Here is a page still under construction. https://amphibian-pomegranate-kebs.squarespace.com/mob-leather-pen-pouch-lpc-126-sp

Thank you in advance

On 7/2/2024 at 6:32 PM, eZeeBags said:

Here is a page still under construction. https://amphibian-pomegranate-kebs.squarespace.com/mob-leather-pen-pouch-lpc-126-sp

Thank you in advance

I don't see code in Page Header. Can you check again?

Or can you take a screenshot of your Page Header Injection?

On 7/5/2024 at 4:10 PM, tuanphan said:

I don't see code in Page Header. Can you check again?

Or can you take a screenshot of your Page Header Injection?

Hi Tuanphan, Thank you for your reply. We removed the code and optimised the mobile pages separately and the pages are not perfect but we want to keep it simple. Thanks anyways for your support. I greatly appreciate it.