[css-round-display] Method for setting the viewport into the non-rectangle display

Hi,
I think there would be a way to set the viewport size as the inscribed square of the non-rectangle display.
It could be a solution for the action item.
https://www.w3.org/Style/CSS/Tracker/actions/751


We discussed about the robustness of CSS on non-rectangular devices at the F2F in Sydney.
When the web page is displayed on the rounded display, the viewport takes the shape of circumscribed square of the display.
Therefore the corners of the web page get clipped.
But any content of the web page shouldn't be lost no matter what the shape of display is.

So I think about adding 'contain' value to <viewport-length> for viewport descriptors.[1]
The author can give the viewport to optimal size for the shape of display by setting 'width' or 'height' to 'contain'.
Then the UA automatically chooses the size of the initial viewport as the inscribe rectangle of the device¡¯s shape.

Or this value can be separated with a new descriptor for @viewport such as:
	viewport-fit: contain
This descriptor decides both width and height of the viewport, so it cant't be used with 'width' or 'height'.

Thanks,
- Jihye

[1] https://www.w3.org/TR/2016/WD-css-device-adapt-1-20160329/#typedef-viewport-length

Received on Tuesday, 5 April 2016 11:14:16 UTC