Currently, I am designing a book reader where the width of the book can vary, ranging from 1028px to 2000px to 560px.
I want mobile devices to automatically scale the book to fit the screen width when viewing it.
This is what I have been doing so far with an example book that has a width of 1028px and a height of 1648px:
In the head:
<meta name="viewport" content="width=1028"/>
In the stylesheet:
body { margin:0; padding:0; }
.bz { margin:0; padding:0; overflow:none; width:1028px; }
.pz { width:1028px; height:1648px; position:relative; }
The structure of the body is as follows:
<div class="bz">
<div class="pz">
Page 1 content
</div>
<div class="pz">
Page 2 content
</div>
<div class="pz">
Page 3 content
</div>
</div>
Although this arrangement stacks the pages vertically, there are two issues:
On mobile devices, the content does not fit perfectly on the screen, requiring horizontal scrolling. The zoom level is not ideal for the device screen width.
Mobile users will notice excessive white space to the right with a horizontal scrollbar that allows them to scroll unnecessarily. This discrepancy is absent in desktop browsers, which disable horizontal scrolling if the window size exceeds the content width.
I believe I may be missing something in my design approach. Do you have any suggestions or solutions?
Thank you!