Flask get viewport size

Question

a short question: Is there a way to get my browsers viewport size by Flask?

I'm designing a page for many devices, for example: normal PC, iphone etc...

Thank you, FFodWindow

Flask apps are run server-side. To get this kind of information, you need something running on the client, like Java Script. — Klaus D.
– Klaus D., Commented May 30, 2016 at 14:15

Mohamed Feddad · Accepted Answer · 2018-11-26 01:29:53Z

2

An ugly workaround with JavaScript, it works nonetheless:

Assuming your original route looks like the following:

@app.route('/user/<user>')
def user(user):
    return 'Hello ' + user

The route after the workaround:

@app.route('/user/<user>', defaults={'width': None, 'height': None})
@app.route('/user/<user>/<width>/<height>')
def user(user, width=None, height=None):
    if not width or not height:
        return """
        <script>
        (() => window.location.href = window.location.href +
        ['', window.innerWidth, window.innerHeight].join('/'))()
        </script>
        """
    return 'Hello %s (%s, %s)' %(user, width, height)

answered Nov 26, 2018 at 1:29

Mohamed Feddad

2342 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rushy Panchal · Accepted Answer · 2016-05-30 14:18:03Z

1

That's not really possible until you have a request from the user and explicitly provide that data in the request (or use the UserAgent to map certain devices to viewport sizes, but the user can change the UserAgent so this isn't necessarily reliable).

Flask solely runs on the server, and thus has no idea what the client is. For example, I can send a request from my terminal or from another server or from another Python app and your Flask server would still respond without knowledge of where I sent it from. If I really wanted to, I could set all to the same UserAgent so that there was no way of distinguishing the three different clients.

The simplest way is to make your content responsive on the client side using CSS media queries.

answered May 30, 2016 at 14:18

Rushy Panchal

17.7k16 gold badges66 silver badges95 bronze badges

2 Comments

malwin Over a year ago

Thanks for the reply, but i use a bokeh plot and you need to set its width and height at the beginning...

Rushy Panchal Over a year ago

@FFoDWindow Regardless of what you're using, you still can't get the width and height on the server.

Dremet · Accepted Answer · 2018-03-14 14:03:02Z

0

Rushy already provided a correct answer, but when you want to use flask and bokeh (I am in the same position right now) responsive design does not help in all cases (I am using a bokeh-gridplot and don't want that if accessed from a mobile device).

I will append "/mobile" to the links from my home page to the plot page on mobile devices (by checking the screen width with css) and then make the plot layout depend on whether "/mobile" was appended to the link. Obviously this has some drawbacks (if someone on desktop sends a link to someone on mobile or the other way around), but as my page is login-protected, they will be redirected to the login page in most of the cases anyways (if they are not already logged-in) and need to go to the plot-page manually.

Just in cases this helps someone.

answered Mar 14, 2018 at 14:03

Dremet

1,0381 gold badge10 silver badges23 bronze badges

1 Comment

Ross Cradock Over a year ago

I too was using bokeh and was looking to get a responsive chart and found this answer here My solution looks like this which scaled nicely with different screen sizes: plot = figure(plot_width=800, plot_height=500, x_axis_type="datetime") plot.sizing_mode = "stretch_width"

Collectives™ on Stack Overflow

Flask get viewport size

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related