A community member has associated this post with a similar question:
Layout design for mobile and desktop (width, height and density)

Only moderators can edit this content.

Layout design for mobile and desktop (width, height and density)

perfect code 271

I want to display data tables in an application on mobile as well as in the web browser or on the desktop and I want it to look appropriate.

My idea is to show or hide the table columns depending on the width of the screen ( Note: I can open the row anyway by clicking a button in a separate window and then I see all the fields below each other)..

When I read out the resolution from my mobile, it was well over 1000px (height is over 2000px). Actually, the whole table should fit on it without any problems, but when I display it, I can only see the first two to three columns clearly, the rest no longer.

The only way I can explain this is that several pixels are used for a drawn point. I was also able to read a parameter called density and it is 1 for desktop and 2 for mobile. I think that I should divide the width by this parameter and then I actually have the width that I would have on desktop.

However, I am not sure how to proceed with such layout concepts and hope that someone here can explain to me how to use the values read out for the width, height and density to calculate approximately what fits on a mobile display and what fits on the desktop.

Thanks