Skip to content

[css-device-adapt] Behavior on Desktop browsers #716

Open
@kareldonk

Description

@kareldonk

In paragraph 4 of the specification (https://drafts.csswg.org/css-device-adapt/) there's an example of what to do when the "actual viewport" cannot fit inside the window or viewing area. But what happens when the "actual viewport" is smaller than the window/viewing area?

Currently on mobile browsers, if you declare a viewport of 480pixels wide while the screen is 320pixels wide, the browser automatically zooms the page out to make the 480px fit in the 320px space initially. If the viewport is 200px wide while the screen is 320px wide, the browser scales up the 200px to fit into the 320px space. On the desktop however, if the viewport is 200px wide and the pagelayout also 200px wide, you're left with 120px empty space on the side, instead of it being scaled to fit the 320px window width.

Is it possible to add into the specifications the following functionality:

  • That the browser automatically scales down the layout if the "actual viewport" is larger than the window in order to make it fit? (zooms out enough to make it fit).
  • That the browser automatically scales up the layout if the "actual viewport" is smaller than the window so that it fills the entire viewing area?
  • Both the above points should work on both mobile AND desktop browsers when a viewport is specified.

In short, the above functionality would make the browser always fit the "actual viewport" in the window (scaling up or down as needed), on mobile AND desktop browsers. You could also add an "automatically scale viewport to fit window" property in case you want to also sometimes enable/disable this functionality so that scrollbars become visible in the window when the viewport is larger than the window client area.

If this is added, it will help a lot to make responsive websites and to make the layout of the website more predictable, and make a design look consistent even though the window might be smaller or larger sometimes.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions