Ivory Chapters — V2 Immersion Advertorial Preview

Blind Date with a Book — Advertorial Preview

Live render of the actual page. Tap a device to switch between mobile and desktop.

↕ Scroll inside the phone to read the full page

This is rendered at each device's true CSS resolution, so it reflects how the page actually appears on that phone. The sticky “Start now” bar stays pinned to the bottom of the screen, exactly as it will in the feed.
'; document.getElementById('frame').srcdoc = doc; var bar = document.getElementById('bar'); var device = document.getElementById('device'); var scaler = document.getElementById('scaler'); var dims = document.getElementById('dims'); var stage = document.querySelector('.stage'); function outer(d){ return d.type === 'phone' ? {w:d.w+26, h:d.h+26} // bezel padding : {w:d.w, h:d.h+36}; // browser chrome bar } function render(i){ current = i; var d = devices[i]; device.className = 'device ' + d.type; var o = outer(d); device.style.width = o.w + 'px'; device.style.height = o.h + 'px'; var avail = (stage.clientWidth || window.innerWidth); var scale = Math.min(1, avail / o.w); device.style.transform = 'scale(' + scale + ')'; scaler.style.width = (o.w * scale) + 'px'; scaler.style.height = (o.h * scale) + 'px'; dims.innerHTML = '' + d.name + ' · ' + d.w + ' × ' + d.h + ' px' + (scale < 1 ? ' · shown at ' + Math.round(scale*100) + '%' : ''); [].forEach.call(bar.querySelectorAll('button'), function(btn, idx){ btn.className = (idx === i) ? 'on' : ''; }); document.getElementById('scrollnote').textContent = d.type === 'phone' ? '↕ Scroll inside the phone to read the full page' : '↕ Scroll inside the window to read the full page'; } var lastType = null; devices.forEach(function(d, i){ if (lastType && d.type !== lastType){ var sep = document.createElement('span'); sep.style.cssText = 'width:1px;height:22px;background:#3a3a44;display:inline-block;margin:0 4px'; bar.appendChild(sep); } lastType = d.type; var b = document.createElement('button'); b.textContent = d.name; b.onclick = function(){ render(i); }; bar.appendChild(b); }); render(startIndex); window.addEventListener('resize', function(){ render(current); });