iPad chooses wrong alternate layout

Question

Hello guys, I have big trouble with my alternate layout document showing correctly on the iPad portrait viewport.

Document Settings: 
Desktop = 1920 x (≥1080) (tall page)
Tablet = 1024 x (≥1366) (tall page)
Mobile = 430 x (≥932) (tall page)

I use relative URLs to hyperlink among the different one-pagers which works perfectly.

Export Settings:
Export Range = Responisve Layouts
Page Format = Continous Scroll (Vertical)
Output = Web
Desktop Scaling = Fill Width
Mobile Device Viewport Zoom = Use Desktop Scaling

I tried every combination of veiwport scaling without success.

Problem description:
If I open my site on the desktop browser, the breakpoints for desktop > tablet > smartphone work well and everything looks and scales like in my layout. On the smartphone it looks also pretty well. 

BUT on the iPad (only portrait) the device chooses the desktop layout and crashes my layout elements: images overlapping text, wrong line spacing etc.

I need your help please.

Answer 1

When you create responsive layouts, it's helpful to know that there are two options for changing layouts:

• If you have exactly 2 layouts that are the same size but one is rotated, then in5 will generate the code to adapt to device orientation.
• If you have 2 or more layouts of different sizes, then in5 will generate the code to tell the browser to swap layouts at different pixel widths.

Here's a video at the point where Justin describes the differences:

• Creating Responsive Liquid Layouts with Indesign & in5

I'm wondering if you're trying to make the responsive layout swap for both orientation and pixel widths--especially if you have tall pages. If you have 3 layouts, then it should change based on the widths. It won't detect a device.

If you're still having trouble, I'd be happy to take a look at your files. Would you be able to send us both of the following for us to troubleshoot?

• Your InDesign file or a sample file that recreates the issue
• Your html5_output folder

You can send them here:

• https://ajarproductions.com/pages/contact.php?category=in5

Comments

Thanks for your fast response. I know the videos from Justin from my research. The simple rotation and two alternate layouts don't really work for my usecase.

You're right, the alternate layout should automatically break depending on the width of the browser/screen. I tried this on several devices and browsers and these are my results:

PC (chrome, firefox, edge): OK
Microsoft Surface (firefox): OK
Android 12 Smartphone (chrome): OK (renders perfectly and switches the layout if I rotate the device)
MacBook (Safari): OK

iPhone 8 (Safari): NOT OK (see screenshots)
iPad (Safari): NOT OK (see screenshots)

After checking the screenshots I figured out following issue (test on the iPad). Loading the page results in buggy layout for both landscape and portrait. The screenshots have the same pixel dimensions - how can that be? Refreshing the browser has no effect, still buggy. Now it's getting crazy: if I rotate from portrait to landscape the layout changes and displays correctly. If I now refresh the browser I get the old problem.

For me it seems to exist a problem with iOS devices and I hope we can fix this together :-)

I've sent you all the files.

---

Thank you for sending your files. I replied via email, but for others who may be having issues with their Responsive Layouts, check the following:

• That your document meets the criteria for a Responsive Layout:
  • How to Create Responsive Layouts using InDesign & in5
• Check the dimensions of your alternate layout for your device:
  • How do I know which pixel dimensions to use for my mobile layouts?
• If the dimensions are good, you can try manually adjusting the trigger width in the html5_ouput/assets/js/in5.config.js file. By increasing the Tablet layout's trigger width from 1024 to 1400, that layout would display in portrait mode on newer iPads.
  • To modify the code yourself, you can open the in5.config.js file in a text editor such as TextEdit (macOS) or Notepad (Windows) or in an IDE such as Dreamweaver which is available if you have the full Adobe Creative Cloud subscription. Scroll down to where you see the trigger width for the alternate layout you want to change, and set it to 1400.