We can set a site to be responsive with the standard meta tag to do so:
<meta name="viewport" content="width=device-width">
This will adapt the content to the viewport width. We can also explicitly set a width – this is pretty uncommon, but it’s possible:
<meta name="viewport" content="width=1024">
This will render the content at 1024. If your device has a width of 768 pixels (e.g. in portrait mode) it will shows the content at a smaller scale.
The reverse is also true, if your device has a width of 1366 pixels (e.g. an iPad Pro) it will show the content at a bigger scale.
What if you want the content to render at 1024 pixels, but if there are more pixels it should render the content at it’s native resolution? Basically it would behave like a liquid website with a minimum width.
The only solution I can think of is to only show the meta tag when you detected the width to be 1024 or less on the server side.
Who has any ideas?
The use case for this is to get the best user experience possible for a web app that has a minimum width of 1024 (because of the content of the pages e.g. tables, datagrids, calendars), but that is not specifically made responsive, on as many devices as possible.
People with good eyesight could theoretically use the app at on a tablet in portrait mode – typically supplying 600 to 800 pixels. But they should really turn their tablets around for their own comfort.
People could also theoretically use the app on a phone by doing a lot of pinching and zooming. Think about a situation where you just have to change a single setting and all you have is your phone.
The app should render at its “native scale” on viewports wider than 1024 pixels. This is the case for large tablets like the iPad. I am also pretty sure there are some larger Android tablets on the market.
I can already hear some people asking “why not just make it fully responsive?”. The answer is that phone usage for the app’s use case is uncommon enough to not make it worth it to build a fully responsive web app.
This is a “cheap” solution to realistically use a web app on as many devices as possible without breaking the bank.
(P.S. Looking at the issues in the spec my theory is that a non-hacky solution to this is basically unimplemented in browsers at this point)