It seems that "out of the box" Zen has an issue (or rather iOS has an issue which manifests in Zen) that in landscape orientation, iPad (and i suppose iPhone too) zooms the viewport and doesn't respect the native resolution, and therefore any breakpoints designed to display content differently for iPad in landscape orientation.
I can fix this (per #1615526: Initial scale, type on iPad and the javascript used in Susy) with:
if (navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)) {
var viewportmeta=document.querySelectorAll('meta[name="viewport"]')[0];
viewportmeta&&(viewportmeta.content="width=device-width, minimum-scale=1.0, maximum-scale=1.0",
document.body.addEventListener("gesturestart",function() {
viewportmeta.content="width=device-width, minimum-scale=0.25, maximum-scale=1.6"},!1))
};
I can't seem to find any other issues like this with a confirmed resolution. Is this the preferred solution or is there some better way?
Comments
Comment #1
izmeez commentedI wondered is this was a duplicate of #1615526: Initial scale, type on iPad
But then as I tried the suggested patch for html.tpl.php I found it was a partial fix to my problems in that the responsive layout on a small iPod touch device in landscape is the correct layout but it is still zoomed in and requires the user to pinch it back to fit. At least now the layout is not broken in landscape mode.
Maybe the issue of the layout breaking in landscape is more closely related to this issue. I presumed the zoom issue was the cause of both as these issues arose together.
Sorry to be posting to both issues. Not trying to hijack them, just trying to sort these things out.
Thanks.
Comment #2
johnalbinYep. Dupe. See my comment #2 at #1615526-2: Initial scale, type on iPad