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

izmeez’s picture

Version: 7.x-5.1 » 7.x-5.x-dev

I 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.

johnalbin’s picture

Status: Active » Closed (duplicate)

Yep. Dupe. See my comment #2 at #1615526-2: Initial scale, type on iPad