Wrong narrow media size: @media screen and (max-width: 750px)

[mozbugbox]

The threshold of the small screen layout miniInterface was set to a wrong value. Pads with the width around 800px would have both the tool-bar and the read-bar cutoff the screen.

As can be see in the code

legado_web_bookshelf/src/views/Chapter.vue

Lines 218 to 224 in 8138545

     readWidth(width) { 
       this.chapterTheme.width = width; 
       let leftToolMargin = -((parseInt(width) + 130) / 2 + 68) + "px"; 
       let rightToolMargin = -((parseInt(width) + 130) / 2 + 52) + "px"; 
       this.leftBarTheme.marginLeft = leftToolMargin; 
       this.rightBarTheme.marginRight = rightToolMargin; 
     }, 

The minimal width for a non-miniInterface screen would be tool-bar + chapter + read-bar + 130.

Since the chapter size is set to 670px, i.e. 68 + 670 + 52 + 130 = 920.

Now the screen is symmetrical, the width has to take the max(tool-bar, read-bar). Therefore the minimum width: 68 * 2 + 670 + 130 = 936px.

The current threshold is set at 750px

legado_web_bookshelf/src/views/Chapter.vue

Lines 786 to 789 in 8138545

  
 @media screen and (max-width: 750px) { 
   .chapter-wrapper { 
     padding: 0; 

[Xwite]

run code below in your browser

window.innerWidth

[mozbugbox]

I used it on an ipad mini, which has a 768x1024 viewport.

https://yesviz.com/tablets.php

There's still quite a few Pad has viewport with <900 width in portrait view.

[Xwite]

fix