naming third layout

Question

Hello,

I am trying to create a document with 3 layouts. One is custom H intended for desktop, other is custom V intended for tablet vertical and the third one is called "mobile" featuring a 360 px wide and 1000 px height page.  It seems there are rules for naming as the mobile device don't recognize the third layout and loads custom H instead. How should I configure more than two layouts?

thanks.

Answer 1

When you have 2 or more layouts of different dimensions (not just swapped dimensions, in which case the layout changes with orientation), it's the resolution of the device/browser on which the content is being viewed that determines which layout is used (as opposed to the naming of the layout). Here's a video that shows setting up alternate layouts for orientation and for browser width:
Creating Responsive Liquid Layouts with InDesign & in5

What is the resolution of the phone where you want the mobile layout to be displayed, and what are the dimensions of the other layouts? It sounds like the dimensions of the layouts may need to be adjusted.

Comments

Hello Myra, thank you for your answer.

The first layout is 43 cm x 29,5 cm; the second is 21,5 cm x 29,5 cm, and the third is 360 px x 1000 px intended for any phone. I am trying it in chrome emulator with iPhone 5 or 6/7/8. The names are Custom H, Custom V and mobile. I just changed the third name to Custom V 375 px but the result is the same.

---

It's still the width, not the name, that matters.

If your alternate layout dimensions are as follows:

• Custom H = Desktop = 43 cm = 1218.898 px
• Custom V = Vertical tablet = 21.5 cm =  609.449 px
• Mobile or Custom V 375 px = 360 px

then you should see the mobile layout for iPhone 5s (with a width of 320 px) but the Custom V layout for most iPhone 6-8s (with a width of 375). The Custom V layout will be displayed until the width of the browser is 360 px or less.

Here's more information on pixel dimensions:
How do I know which pixel dimensions to use for my mobile layouts?

If you're still having trouble with the mobile layout showing for the iPhone 5 version, would you be able to send us a zip file containing your InDesign file and your html5_output? You can send it to: https://ajarproductions.com/pages/contact.php?category=in5

---

Thank You. The link with more information on pixel dimension was very useful.