Proper scaling on mobile phones

[Conengmo]

Closes #842. On mobile devices currently maps have tiny controls and text. In this PR a line is added to the html page header that disables scaling. This way, on mobile phones the controls and text become larger. This is also the way it's done in a Leaflet example:
https://leafletjs.com/examples/mobile/

I don't think there are any downsides to this, but if anyone knows any please share them.

[Conengmo]

@ocefpaf you want to go ahead and merge this? (after Travis gave the green) Or do you have any comments?

[ocefpaf]

Thanks @Conengmo! LGTM!!

[Azryael]

A simple fix that has enabled scaling of both the icons and the interface itself, I add the following meta tag in the HTML file:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

This may not be a permanent workaround, but it works just fine for me, and has already improved the user experience of my map application when viewed on a mobile device.

There is an important caveat, however. Each time you run your .py to publish a new HTML file, the old one is overwritten, which means you need to add this code back each time you run map.save() or similar command.

[AdnanHodzic]

l have a problem with Folium maps not being scaled properly in portrait mode on mobile. The controls and every other element is too small, and I can't zoom in fully to my map/markers.

However on mobile in horizontal mode everything looks great.

[Elcook]

I have the same problem as @AdnanHodzic.

This is part of the code I'm using:

import folium,branca
from flask import Flask
from folium.plugins import LocateControl

app = Flask(__name__)
app.config["Debug"] = True
@app.route('/')

def index():
    start_coords = (38, -8)
    fig=branca.element.Figure(height="100%")

    m=folium.Map(location=start_coords, zoom_start=4,max_bounds=True)

    e=folium.LatLngPopup()
    m.add_child(e)

    LocateControl(strings={'drawMarker':'false'}).add_to(m)

    fig.add_child(m)

    m.get_root().header.add_child(folium.Element('<meta name="viewport" content="width=device-width,'
    ' initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />'))

    return m._repr_html_()

Is there anything missing?

you can check what I'm doing here:

link