I'm building a kind of simulator with a python code that generates animations of planet orbits. For this, I'm using Streamlit which implicitly hosts my code on a website and allows me to create a simulator interface.

The problem is that I set a fixed size to my plot size. When I open the simulator link on the computer the size is great. However, on a smartphone, whose screen is smaller, the plot is very large.

Is there any way to define the size of a plot according to the percentage I want it to occupy on a certain page of a site, or through a scale? This is so that the plot size adjusts according to the page size and is not a fixed number (in this case, I had used height=800 ).

To make it clearer, below is the piece of code referring to the animation plot.

fig = plt.figure()

plt.xlabel("x (km)")
plt.ylabel("y (km)")
plt.gca().set_aspect('equal')
ax = plt.gca()
ax.set_facecolor("black")
circle = Circle((0, 0), rs_sun, color='dimgrey',linewidth=0)
plt.gca().add_patch(circle)
plt.axis([- (rs_sun / 2.0) / u1 , (rs_sun / 2.0) / u1 , - (rs_sun / 2.0) / u1 , (rs_sun / 2.0) / u1 ])        

graph, = plt.plot([], [], color="gold", markersize=3)

def animate(i):
    graph.set_data(x[:i], y[:i])  
    return graph,

skipframes = int(len(x)/200)
    if skipframes == 0:
       skipframes = 1

ani1 = FuncAnimation(fig, animate, frames=range(0,len(x),skipframes), interval=30, blit = True, repeat = False)
        
HTML(ani1.to_jshtml())
components.html(ani1.to_jshtml(),height=800)

And below, a print of how the animation appears on my smartphone