Mobile Problems

Responsive Responsive Layouts
1

I’m having a lot of trouble getting this web page to look right on mobile devices: http://www.everblaze.com/evr/evr.html. It looks fine on desktops/laptops, and even on an iPad (both portrait and landscape). But when I try to look at it on an iPhone or Android phone (I have a Galaxy S6), it doesn’t seem to work. If I tap the screen a couple times everything zooms out and it looks right but when it first loads, it’s zoomed way in (both portrait and landscape).

Here are two mobile screenshots of what it looks like when the page first loads:

I feel like I’ve tried everything (turning things on and off in Hype). When the page loads, it’s supposed to look like this, with no scrollbars): https://www.dropbox.com/s/zgf9rhvob17s5vi/Screenshot_2015-10-20-12-02-19.png?dl=0

If anyone has any suggestions, please let me know. I need to launch this page soon but I’m stuck. Thanks!

2

@344kellogg, 1st, the screenshots you posted, I noticed they are android based, what devices are you using when taking the screenshots?

3

I have access to an iPhone 6 and a Galaxy S6. The same thing seems to be happening on both phones.

4

It looks like an “allow user scrolling” conflict and possibly a device width and height adjustment. Can you share a document (hype file)?

D

5

There it is @344kellogg, the breakpoints of the iPhone 6 or the Galaxy S6 are at a smaller resolution. You are going to need another layout for mobile phones. Then, use Safari’s Developer options and go to > Develop> Responsive Design Mode to check how the website looks across multiple layouts (screen shot attached).

Screen Shot 2015-10-20 at 6.06.29 PM.png2560×1080 1.33 MB

Regards,
tg2k

1 Like
6

Here you go: https://www.dropbox.com/s/ivaqd61yt01sakn/Everblaze.zip?dl=0. Thanks.

7

looks like @techgiant2000 may have the answer.

D

8

Thanks. So I need to create layouts for each size (9 layouts)? What about Android? With iOS there are a set number of screen sizes. But with Android there are hundreds. What would be the best way to handle everything else?

9

@344kellogg, a general rule of thumb is considering scaling and breakpoints between the smallest size and largest size displays audience. I generally do 3 layouts (phone, tablet, and desktop). From here on, play with the layouts and devices to see what best suites your audience.

Best Regards,
tg2k

1 Like
10

Thanks for your help. @techgiant2000 and @DBear

11

Hi, i don´t have the Responsive Design in my Safari. How can I get it? Thanks.

12

Safari 9.0>Preferences>Advanced>Show Developer in menu bar

13

Thanks so much.

14

I found this website that shows pixel sizes for a bunch of different devices: http://mydevice.io/devices/. Two questions: 1) Is it necessary to create unique layouts for everything, assuming I want to avoid any scrolling (which I guess requires a fixed height and width?)? And 2) Does the pixel ratio impact what I’m doing with Hype? Thanks.

15
  1. No

2)Yes, it does because the individual layouts scale for each device the layout is meant for.

tg2k

16

Thanks. What do I need to do to account for the pixel ratio? Is it just a matter of creating layouts with the correct pixel height and width? Or is there something else that needs to be adjusted in the Hype interface?