Viewport Meta - Property => Max-Element-Width: 800px or 40rem or width=device-width+inflation

[wesleyolis]

Hi,

I would like to propose the following for Viewport parameters, which would allow mobile phones, which don't correctly deal with overflow or where items are difficult to have them always correctly overflow, to easily solve the issues.

Proposal
max-width, which allows one to specify that ideally the device with should be used, but when there are items, in which text is not able to wrap, then typically these force the page to be larger than the mobile device screen width. For items lower down on the page, then all render super small. The idea with this is that items, which would cause a page to overflow the device-width, because their text can't be wrapped, will be ignored in increasing the width parameter to the value specified.

The following proposal should also then implemented the following CSS properties, which can currently do without this specification #10404

1 as items are encountered, that would cause the page width in pixels to grow wider than viewport. content.width, will be handled differently if viewport.content.max-width is set.
2. If the item encountered to be render will cause the line-row to overflow the viewport.content.width in pixels, then it will check the viewport.content.max-width if set and will limit the mobile device viewport.content.width that each HTML element downstream of this element when querying the style width "width:100%"
The var-browser-screen-page-max-width returned for Width:100% query will limit the inflation the browser variable(var-browser-screen-page-max-width) internally to the formula specified by max-element-width

By doing this items downstream will all render correctly for the mobile viewport width that is limited to device-width or device-element-width, the mobile browser can then set the viewport width accordingly. and downstream layouts will all be correct.

The alternative can also look to implement another property for width, which is device-width+inflation
width=device-width+inflation, in this case specify how the value for style query of width:100% is returned when rendering an HTML page progressively.

<meta name="viewport" content="width=device-width+inflation, max-element-width=device-width*1.25, initial-scale=1">

<meta name="viewport" content="width=device-width, max-element-width=device-width*1.25, initial-scale=1">

Example of this could be seen if you take this page and turn of text-wrapping for some items.
https://jonginenge.co.za/livecams/nahoonbeach/daily/index.php?Bouq=&Year=2024&Image=159:07:00

Also the following older page layout using table due time I had to do this in and things were not my focus until now, can also be layout much better, because the downstream grid would get the HTML page style query width, which includes the inflation of the width. When the device viewport is then centered and zoom factor determined when compared to the device width.
Downstream items will render the correct with because of the progressive inflation of HTML on row by row basis.
https://jonginenge.co.za/livecams/nahoonbeach/daily/thumbnails.php?Bouq=&Year=2024&Image=|

Just ask if like more information.