From 4de044dc904a6da04c24ed9fdf58a38f5a49b091 Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Mon, 20 Nov 2017 00:21:40 +0000 Subject: [PATCH] Fix Android/iOS inconsitency with webview page scaling --- .../lib/components/note-body-viewer.js | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/ReactNativeClient/lib/components/note-body-viewer.js b/ReactNativeClient/lib/components/note-body-viewer.js index b93eb00e4..541dd0a7f 100644 --- a/ReactNativeClient/lib/components/note-body-viewer.js +++ b/ReactNativeClient/lib/components/note-body-viewer.js @@ -59,10 +59,28 @@ class NoteBodyViewer extends Component { webViewStyle.opacity = this.state.webViewLoaded ? 1 : 0.01; } + // On iOS scalesPageToFit work like this: + // + // Find the widest image, resize it *and everything else* by x% so that + // the image fits within the viewport. The problem is that it means if there's + // a large image, everything is going to be scaled to a very small size, making + // the text unreadable. + // + // On Android: + // + // Find the widest elements and scale them (and them only) to fit within the viewport + // It means it's going to scale large images, but the text will remain at the normal + // size. + // + // That means we can use scalesPageToFix on Android but not on iOS. + // The weird thing is that on iOS, scalesPageToFix=false along with a CSS + // rule "img { max-width: 100% }", works like scalesPageToFix=true on Android. + // So we use scalesPageToFix=false on iOS along with that CSS rule. + return ( this.onLoadEnd()}