My Problem:

My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.

1. The sections are arranged horizontally in a grid display.
2. Then when I see the same page on phone, the middle sections are collapsed (not shown).
3. There horizontal and vertical scroll views is not visible, when it should.
4. and like it should be: the horizontally arranged sections should arrange vertically to be able to show each section.

I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.

I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).

Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).

I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.

I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.

Trying to take help from:

1. How to make a page responsive
2. How can I arrange horizontally ...