iPhone and Viewport

[tekdope]

Hi guys, Viewport command doesn't seem to work on iPhone version. HTML width should adapt to device width like it does in safari but doesn't work once the page is displayed in Baker. (see screenshots).

[Simbul]

Make sure you delete the app from the simulator before you switch from iPad to iPhone. That usually solves it for me.

[tekdope]

Will try and let you know

[tekdope]

Still doesn't work, even after cleaning build, remove it from simulator. Display perfectly in Safari.

[folletto]

The demo book we provide is made just for iPad, you can't use it as an example on iPhone. :)

If instead you are adding your media-queries, you should post here the media queries you're using. :)

[tekdope]

Hi Folletto, my fault, i should be more clear on this. I modified the viewport settings to match the device width ( content="width=device-width;") to force the device to display the full page without having using media queries. Not working in Baker but fine with safari.

[folletto]

Ok, now I understand. :)

The answer is equally simple. Baker uses scalesPageToFit to turn off zoom. This is because users don't expect a book to be zoomable, it must work at the intended resolution. You can override that property in book.json, but we strongly advise against it because it creates a bad experience for the reader.

The meta viewport parameter simply "forces" the page to use a specific page width, but that basically just works on the zoom level of the page (I'm simplifying a bit) and it's the same for the user as a zoomed book: a bad experience.

This means that you should not use viewport (other than force certain parameters if needed by your layout) and instead use the media-queries. This is the proper way to manage multiple-resolutions. For a broader explanation, search for responsive web design, that's the specific name of the design technique to be used. :)

[tekdope]

But that's the thing, i don't want people to zoom, just want to keep the same layout and shrink it on the fly :)

[folletto]

That's not something possible. "Shrinking" means zooming, unless you use media-queries as said. :)