How to make a link detect user's screen resolution and redirect them to the appropriately sized page.

Ask the community
,
1

Hello, allow me to explain my situation in more detail.

I have three versions of my site’s homepage. One for higher resolution screens (1600 width or higher) one for lower res screens (below 1600 width) and one for tablets. Now you’re probably wondering, why the hell is that necessary? Well, it’s complicated and rather than get lost in the backstory, I want to stay focused on the main issue:

I want create a page before the homepage (let’s call it a pre-homepage) that says: “for optimal viewing please choose your device” and then have two linked buttons one that says “Desktops and Laptops” and the other “Tablets”. I want the “Desktops and laptops” button to automatically detect the user’s screen resolution and redirect them to the appropriate page.

I’ve tried searching for example code on google and all the examples haven’t worked.

I would very much appreciate any help I can get on this. Thanks!

2

Have you tried using an the wixWindow formfactor function?

3

The following code will work if you have a pages which are mypage.com/mobile, mypage.com/tablet, mypage.com/desktop

Put this code on your landing page. It will automatically send users to the page relevant to their device.

import wixWindow from ‘wix-window’;
let jimmy = wixWindow.formFactor;
import wixLocation from ‘wix-location’;

$w.onReady( function () {
if (jimmy === ‘Mobile’) {
wixLocation.to(“/mobile”);
let jimmy = ‘done’;
}

if (jimmy === ‘Tablet’) {
wixLocation.to(“/tablet”);
let jimmy = ‘done’;
}

if (jimmy === ‘Desktop’) {
wixLocation.to(“/desktop”);
let jimmy = ‘done’; }
}
)

4

I have not tried it as I don’t know how to implement it. I see it has some code for getting the user’s screen size, but I don’t know what the correct code is to tell wix what to do with that screen size once it has been obtained. I should also have pointed out in my original post that I have very little experience in code…

5

The problem with this is that not all desktop users have the same screen resolution. I need some sort of code that says… if desktop user’s screen resolution is less than x, redirect to y if resolution is more than x redirect to z.

6

Based on Josh’s reply below I wonder if I could do some sort of combination of yours and his reply. something like if windowWidth > 1600 then wixLocation.to “homepage a” else wixLocation.to “homepage b” Same problem though, I don’t know how to write the code to bring that idea together and make it work.

7

@tomheuser83 my advice would be to do what 90% of websites do and just have two versions: large screen and small screen. That’s what users expect. Wix is very very good at resizing content between tablet/desktop size devices (though I agree it’s often handy to be able to redirect users to a seperate mobile site). However, the above code is super simple and it would only take you an hour or so at the very most (even if you are a complete beginner) to adapt it.

8

[@tom.heuser83] The only way to do this at the detail you need is to use an htmlComponent that determines the resolution and then sends a message to the page telling it what resolution it has detected.

Add this code to the htmlComponent:

/* * * * * * * * * * * * * * * * * * * * * * * * *

  • Paste the following into the HTML Component: *

<!doctype html>

  • This is the page code: *
                                                • */

$w.onReady(function () {
// when a message is received from the HTML Component
$w(“#myHtmlComponent”).onMessage( (event) => {
console.log(Screen resolution: height:${event.data.height}, width:${event.data.width} );
} );
} );

The first section of code is html and you put this in your html component. Make sure your component is called “#myHtmlComponent”.

The $w.onReady code goes in your page code.

Cheers

9

First of all, thanks for your replies! And secondly, apologies for my naivete, but where is the HTML component? I see two options in the wix code editor: “Site Code” and “Page Code”.

10

Hi Tom
It’s an element you add you your page.

If you click the + bottom and go to the more menu one of the first options is a green iFrame element.

That’s your htmlComponent.

Check out the docs for how to use it:

Cheers

11

Thanks! Now that we have code that gets and tells the page what the user’s screen resolution is, how do I instruct the page to redirect the user according to their resolution?

12

[@tom.heuser83]
Hi Tom:

I recommend that you spend some time reviewing the API documentation and go through the various articles on the Wix Code mini site.

The api for loading new pages is described here:

Make sure you read all of the wix-location info.

Cheers
Steve

13

Thanks! I finally came up with a solution! You can try it out here: capitolhillpast.org/test

I put the code into a clickable button instead of automatically running when visiting the page. This is the code I used:

import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;

export function text8_click(event) {
//Add your code for this event here:
wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
let windowHeight = windowSizeInfo.window.height; // 565
let windowWidth = windowSizeInfo.window.width; // 1269
let documentHeight = windowSizeInfo.document.height; // 780
let documentWidth = windowSizeInfo.document.width; // 1269
let scrollX = windowSizeInfo.scroll.x; // 0
let scrollY = windowSizeInfo.scroll.y; // 120
if (windowWidth < 1600) {
wixLocation.to(“https://capitolhillpast.org/home-l”);
} else {
wixLocation.to(“https://capitolhillpast.org/home-d”);
}
} );}

14

@Steve Cropper Actually, I take back what I said. What I provided above will not do. Window width and height only give the size of the browser window, not screen resolution. So I’m back to square one.

I tried to make use of your code with the HTML component and it doesn’t work so far. Here’s what I have:
(Note well, I named my HtmlComponent “#html1”

import wixLocation from ‘wix-location’;

$w.onReady( function () { // when a message is received from the HTML Component
$w(“#html1”).onMessage( (event) => { console.log(Screen resolution: height:${event.data.height}, width:${event.data.width} ); } ); } );

export function text8_click(event) {

if (event.data.height === 1080 && event.data.width === 1920) {
wixLocation.to(“https://capitolhillpast.org/1920x1080”);
}
else if (event.data.height === 992 && event.data.width === 1768) {
wixLocation.to(“https://capitolhillpast.org/1768x992”);
}
else if (event.data.height === 900 && event.data.width === 1600) {
wixLocation.to(“https://capitolhillpast.org/1600x900”);
}
}

Nothing happens when I click the button that is supposed to activate a series of if else if actions. Any help would be much appreciated. Thanks.

15

wix sites automatically resize themselves. depending on window size. So even if you managed to fix your code, you’re going to have to write much much more code to overwrite the Wix default coding for resizing elements (MUCH more). And in any case, why does screen resolution matter when users could be browsing in any window size?

16

@88josh I was trying to work around the issue of writing code to resize elements by going the screen resolution route. Let me try to explain with a bit more back ground. Basically i want to use an old photograph of a street corner and have the signs be clickable buttons (elements) that take the user to other pages on the site. If I set the photograph as the page background the buttons will change size and position based on the the user’s screen resolution and/or window size, which I don’t want. Here’s a live example of that: https://www.capitolhillpast.org/photo-as-background Even though I put the buttons right over the signs in the editor, they are no longer where I put them when I view the live version and they move even more when I change the window size.

The alternative was to insert the photograph as an image floating over a blank background. This way you can create a different version of the homepage for every type of screen resolution with the appropriately sized image and buttons. Here’s one example using my resolution 1920x1080 https://www.capitolhillpast.org/photo-as-image The buttons stay put over the signs as I want them to as long as you are operating within 1920x1080–at least so it appears for me anyway.

The problem with this is that I haven’t figured out the code and it’s a pain to create a page for EVERY possible screen resolution and to code for it accordingly . Conclusion: the fun idea of having clickable signs probably just isn’t an option on Wix.

17

@tomheuser83 that’s a cute photo and a great idea for a site. Have you tried affixing all the elements to the top left hand corner of your screen? You’d still need to create individual version for mobile and big screen.

18

@88josh I have not. Do you mean just the buttons while the photo is set as background? Or the buttons AND the photo as a floating image? Either way. Having trouble imagining what that accomplishes.

19

@tomheuser83 Okay, I’ve investigated a little and I understand the problem you are having. I think you are right, the clickable signs idea is going to be very complicated. However, the good news is that I think the version here https://www.capitolhillpast.org/photo-as-image works fine! As the sign is in the centre of the image, even people with resolutions around half the size of yours will still see it.

If i were you, however, I would use the code I posted to make a mobile version (perhaps just using the signpost part of the image).

it’s a really great photograph and the signs idea is really good, so it would be a shame not to use it.

20

@88josh problem with that is for ton of people a large portion of the image and title will end up being cropped out of view which wont look good. :frowning: The other workaround for this is to choose a middle ground size that will result in higher resolution users seeing blank bands on either side of the photo.

Aside from this I was not planning on using the signs as buttons in mobile version as it would be too small.