I am rewriting a web-based 2006-era asp.net application, using the latest available technology. It's not a website. It involves multiple participants interacting with a single page that displays three panels of information. It will be used predominantly in business-like situations.
I have concluded that the application will have to behave very differently on phones (if it can be useful beyond view-only on phones at all), so I'm writing the initial release for for PCs and tablets only.
The original design was specifically intended to operate in 1024x768 resolution. That is still a reasonable target for visibility and functionality.
My question is about what might be helpful to do for larger, higher resolution screens.
On my development system when I reset my resolution to 1600 x 1200, the current 1024x768 display of course become smaller and located in the upper left-hand corner. I can make it more readable by increasing the browser zoom. And I'm assuming that the user can figure out how to run the application and one copy of the browser and do everything else in another copy. The application could provide ample instructions for doing so
Suppose though I wanted to do something to automatically adapt the display to users' current screen resolutions. I can generally see that I can use @media to detect screen size and resolution, so that's a start.
What I'm not sure about is how to modify the CSS to scale the page parts and fonts to be larger.
Is it a matter of specifying complete, different sets of CSS rules for the different media sizes? (And maybe that's the answer). Or is there some other approach?
Any input on this would be appreciated.