iOS9 Safari having trouble with page with Hype elements

ios

(Peter Laundy) #1

I added some tiny non-flexible small Hype checkmark symbol animations to a page and they work fine on my Mac in Safari, Chrome and Firefox at all viewport widths (there are breakpoints in the layout)

However, not in iOS9 Safari on my phone and iPad! The browser appears to be confused about viewport size, showing page content at way too large a scale and too narrow a width.
For example, the page layout showing up on my iPad in both landscape and portrait mode is for a breakpoint at 570px or less.

When I comment out the Hype code in the head and hide each div surrounding each of the 5 Hype elements, the problem goes away.

Page construction is being done in Freeway Pro 7.1.


#2

Can you share a link? Haven’t heard of this issue before.


(Peter Laundy) #3

Swear I’d included it in my first message!


(Peter Laundy) #4

Ah. I see. when I hit the little link icon and fill in the URL it isn’t included. Here’s a try with the link just pasted into the text

http://www.peterlaundy.com/iroquois-valley/farmeroffering.html


#5

On line 26 you have this line:

<meta name="viewport" content="user-scalable=yes, width=32" />

This was likely generated when producing your Hype document as a default (most Hype documents aren’t this small).

To avoid exporting this, go to Document Inspector > Mobile Options > Viewport width > ‘Not Set’.


(Peter Laundy) #6

Yup. That was it. Many thanks!

(I had added that line of code because their were instructions in the hypedocumentname.html to do so)