going from spread to single page view depending on device?

Question

Hi,

Can you layout a magazine like it was in print with spreads, and export our a file that would respond based on the device. Can the person reading the web export of the mag on a desktop or laptop see spreads, and the person in a mobile device see single pages. Can this be done?

Answer 1

With custom coding, you could create CSS media queries that show 2 pages side-by-side at a certain window size.

This is probably more advanced than I can cover in a short answer.

---

Update:

Now automatic with the Flipbook format.

Video demo:
https://ajarproductions.com/blog/2017/08/14/html5-page-flip-from-indesign-sneak-peek-of-in5-v3-1/

Answer 2

I've got part of the answer. I assume you're interested in a horizontal slider, as am I. And I want back and next arrows.

The setup: I have a page width of 512px giving a double page spread of 1024px.

Currently the width of the page container .anythingSlider is determined by inline CSS:
<div class="anythingSlider anythingSlider-in5 activeSlider" style="width: 512px; height: 768px;">

Widening this to 1024px display's two pages side-by-side. This can be done with CSS:
.anythingSlider {
   width: 1024px !important;
}

... and use 512px for smaller device widths to get back to a single page display.

That was the easy part. The part I'm stuck on is the page navigation. The back/next arrows only advance 1 page at a time, but on desktop and tablets in landscape we want it to advance 2 pages at a time. This requires some device detection (orientation or device width) and changing the behaviour of the anythingSlider back/next arrows. Both are beyond me.

I had another inelegant solution using two page navigation buttons per page: one with the next page and a hyperlink to the page after that (using this solution for linking to a specific page). Then use CSS media queries to hide the button not needed based on device width. It works but there is no page transition on the hyperlink.  

So if anyone can take on the Javascript we may have a solution!