Viewport size¶

Overview¶

The viewport size API allows you to access the current viewport size. This can be useful for creating responsive and adaptive designs that are suitable for the user's screen size.

Examples¶

Responsive Design¶

Responsive design is having a single fluid layout that adapts to all screen sizes.

You can use the viewport size to dynamically set the property of a style. This can be useful if you want to fit two boxes in a row for larger screens (e.g. desktop) and a single box for smaller screens (e.g. mobile) as shown in the example below:

import mesop as me

@me.page()
def page():
    if me.viewport_size().width > 640:
        width = me.viewport_size().width / 2
    else:
        width = me.viewport_size().width
    for i in range(8):
      me.box(style=me.Style(width=width))

Tip: Responsive design tends to take less work and is usually a good starting point.

Adaptive Design¶

Adaptive design is having multiple fixed layouts for specific device categories at specific breakpoints, typically viewport width.

For example, oftentimes you will hide the nav component on a mobile device and instead show a hamburger menu, while for a larger device you will always show the nav component on the left side.

import mesop as me

@me.page()
def page():
    if me.viewport_size().width > 480:
        nav_component()
        body()
    else:
        body(show_menu_button=True)

Tip: Adaptive design tends to take more work and is best for optimizing complex mobile and desktop experiences.

API¶

`viewport_size` ¶

Returns the current viewport size.

RETURNS	DESCRIPTION
`Size`	The current viewport size. TYPE: `Size`

`Size` `dataclass` ¶

ATTRIBUTE	DESCRIPTION
`width`	The width of the viewport in pixels. TYPE: `int`
`height`	The height of the viewport in pixels. TYPE: `int`