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
  • 3 months later...
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

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
  • 3 weeks later...

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 ? 

Edited by eZeeBags
Link to comment

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. 

 

Redirect to mob optimised page.png

Link to comment
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. 

 

Redirect to mob optimised page.png

What is desktop page? I can test easier

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
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?

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
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. 

 

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.