Viewport content issue on mobiles w/ lag

1

I’m designing the landing for a website, and theres an issue on mobiles with this line of code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

With this line, the layout works across mobiles, tablets and desktops, but the hype animations are laggy (see the navigation bar) and the ‘Discover’ button doesn’t work.

Without this line, the website layout is completely wrong, but there is no lag and the button works fine.

Website without Viewport.

Website with viewport.

Both websites seem to work fine on desktops.

2

Can you see if restricting scaling is what is affecting animation performance?

Try:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

3

No change unfortunately, I think all the issues come down to “width=device-width”

4

Generally if a device needs to do scaling to fit content, there will be a performance penalty.

5

At first I assumed since scaling is off, it would use the first layout but it instead uses 750px to 1400px, even though the iPhone is 375px wide. Why is this the layout and not the first one or the correct one.

6

Hmm… on an iPhone 6/6s/7, device width should be 375px if you are in a portrait orientation. I’m not sure why it would load 750px if you have a smaller one in that case. If you don’t use the viewport setting, then the width is 960px which is what you would be seeing.

7

Would this have something to do with it?
It says that the actual rendered width for a 6/S/7 is 750px.

Either way, the main issue was actually the button functionality. Why is it that the button that scrolls down works without the viewport but stops working with the viewport?

8

No, device width used in Mobile Safari is 375px on those phones (where a pixel is really a “point”, or a @2x pixel). When I view on mobile, I do appear to get the correct layout on both links.

9

Here is indexxx (No viewport - discover button works) on chrome and safari:

IMG_9305.PNG600×1067 2.3 MB
IMG_9306.PNG600×1067 2.25 MB

And here is indexx (With viewport - discover button doesn’t work)

IMG_9307.PNG750×1334 584 KB

If you are using a desktop browser to emulate the website it works, but on actual mobile devices it doesn’t.

The discover button only works on the first two screenshots.

10

To clarify, the bottom one is the correct layout that you want, right? And that is showing up okay, but the discover button is not working?

I’d need a zip of your .hype to investigate more, but my guess would be that you’re doing the scroll via some sort of Javascript, and that may be referencing something different when in your mobile layout. The mobile layout is a different scene, and has different elements/etc, so it could be that you’re not performing the scroll correctly (this is my best guess).

11

Hmm I tried creating new JS calls but still no cookie.

LANDING NEW.hype.zip (993.4 KB)

And then in the HTML file wherever I want it to scroll to will have:

   <div id="bottom" style="height:0px;width:100%;">
  </div>
12

I would suspect the problem is that you have multiple elements with the id of “jump” in each scene (in the “jump” element). IDs need to be unique, so each layout should have its own element for going down on the page. There also might be easier ways to do this as well.

13

I’ve tried everything I can and I still can’t get it to work. I’ve duplicated and renamed JS files, objects and ID’s. I’ve even gone as far as deleting the corresponding files for the bigger layouts and only leaving the mobile layout, and it still doesn’t work.

Is there a solution you have, or possible the easier way you mentioned.

Thanks!

14

It’d be useful if you could send a package with all your .hype documents and files you are using to compose this, since there’s a lot of different files.

The easiest way that doesn’t have a smooth scrolling effect is to just use the javascript window.scrollTo() function.

1 Like