Set Zoom Level for WebView to Maintain Aspect Ratio on Small Laptop Devices (Desktop)

[alirezat775]

The current implementation of WebView in our application does not maintain the correct aspect ratio when viewed on small laptop devices. This leads to a distorted user interface, affecting the usability and overall user experience.

On laptops with smaller screens, the WebView content appears compressed, leading to layout issues and potential loss of UI functionality.

If we have the option to set the zoom level, we can adjust the correct zoom level on small laptop devices.

Thank you in advance

[KevinnZou]

Thank you for your feedback! Just to clarify, are you asking for a method similar to setZoomScale that allows you to manually control the zoom level? Is it similar to the setInitialScale method in AndroidX WebView?

[alirezat775]

Yes, that is the exact behavior, I need to scale down the webview which means zoom out if the user device width and height are less than the minimum value.
for example, the available size for the webview is 600 * 800, in this case, I would to have the same view as 1280 * 1920. like scaling down the webview aspect ratio (1.5, 2 times or 150, 200 percent) to reach the same view in 600 * 800 as 1280 * 1920.

I do not think the calculation should be on the webview library side, I believe if we have an option to just scale up and down the webview will be helpful.

I hope you find the explanation helpful.

Thanks

[KevinnZou]

Yes, that is the exact behavior, I need to scale down the webview which means zoom out if the user device width and height are less than the minimum value. for example, the available size for the webview is 600 * 800, in this case, I would to have the same view as 1280 * 1920. like scaling down the webview aspect ratio (1.5, 2 times or 150, 200 percent) to reach the same view in 600 * 800 as 1280 * 1920.

I do not think the calculation should be on the webview library side, I believe if we have an option to just scale up and down the webview will be helpful.

I hope you find the explanation helpful.

Thanks

Got you! I will add it to our plan, but it may take some time as I have a deadline this month. You are also welcome to submit a PR yourself!

[KevinnZou]

I have added support for this issue on Android and Desktop. However, I encountered some issues with the iOS implementation and am currently working on resolving them. @DatL4g, could you please review the Desktop implementation first? It is relatively simple, but it has one problem: the zoomLevel can only be set after the page has loaded, which causes a visible shake effect for the user. Do you have any suggestions for resolving this issue?

[DatL4g]

Can be fixed if we resolve this #37 (comment)

[KevinnZou]

Can be fixed if we resolve this #37 (comment)

@DatL4g I discovered that onTitleChange is a suitable place to adjust the zoom level without causing any shaking effect. However, I found that setZoomLevel method does not scale the page exactly as desired. For example, when we set it to 200%, it appears to only scale it to 150%. Do you have any suggestions for solving this problem?

[KevinnZou]

Yes, that is the exact behavior, I need to scale down the webview which means zoom out if the user device width and height are less than the minimum value. for example, the available size for the webview is 600 * 800, in this case, I would to have the same view as 1280 * 1920. like scaling down the webview aspect ratio (1.5, 2 times or 150, 200 percent) to reach the same view in 600 * 800 as 1280 * 1920.

I do not think the calculation should be on the webview library side, I believe if we have an option to just scale up and down the webview will be helpful.

I hope you find the explanation helpful.

Thanks

@alirezat775 I have implemented the basic functionality for this issue. However, as mentioned above, there seems to be a problem with the desktop side. Could you review and test it on this branch to see if the problem also exists on your side?

[alirezat775]

@KevinnZou, I checked it, and the zoom level problem is the same as you mentioned in the last comment, for testing, I set the zoom level to 2.0 and I opened the same page on Chrome, the equivalent of the 2.0 is 150% on Chrome, However, I found this issue on the CEF forum, it seems zoom level should be applied by this formula:

Scale := 1.2 ^ ZoomLevel;
ZoomLevel := LogN(1.2, Scale);

[KevinnZou]

@KevinnZou, I checked it, and the zoom level problem is the same as you mentioned in the last comment, for testing, I set the zoom level to 2.0 and I opened the same page on Chrome, the equivalent of the 2.0 is 150% on Chrome, However, I found this issue on the CEF forum, it seems zoom level should be applied by this formula:

Scale := 1.2 ^ ZoomLevel; ZoomLevel := LogN(1.2, Scale);

@alirezat775 Thank you for your help! I have implemented your formula to fix the issue. Could you please give it a final review before I proceed with opening the PR?

[alirezat775]

@KevinnZou Thank you for the Implementation, It works on the zoom-in perfectly, however for the zoom-out, it does not work, I did debug it, and I implemented this code
Since I do not have access to push the code I am writing it here,

val givenZoomLevel = state.webSettings.zoomLevel
val realZoomLevel = if (givenZoomLevel >= 0.0) {
    ln(abs(givenZoomLevel)) / ln(1.2)
} else {
    -ln(abs(givenZoomLevel)) / ln(1.2)
}

The issue was ln function, if the number is < 0.0 the result will be NaN, so I extracted the given zoom level, and after calculation, I passed the minus if the given value was < 0.0.
it works as we expected.

[KevinnZou]

@alirezat775 Thank you for your help! I have submitted the PR and will release it in the next version. I really appreciate your contribution to this issue!