New to OSM... Size of text/buttons too small on smartphone browser

General talk
1

Hello,
I would like to show a map in a web page, to display on smartphone.
The very simple example I found works great on a Mac or PC, but as you can see on the attached screen capture, the size of text and buttons are really too small on smartphone.
Unusable.

Is there a way to modify this code to show the map properly, i.e. with readable text and icons ?
Any help would be appreciated…

the code I use :

<?php
$longitude = $_GET["lon"];
$latitude = $_GET["lat"];
?<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    var lonLat = new OpenLayers.LonLat(<?php echo $longitude.",".$latitude; ?> )
          .transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() );
    var zoom=16;
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(lonLat));
    map.setCenter (lonLat, zoom);
  </script>
</body></html>

2

It does look as if the html and css of the website where you display the map does not follow any rules for responsive webdesign. So I would start to crrect that.

3

Leaflet is often a better framework for this sort of thing. I find controls on OpenLayers sites still a bit harder to use using a smartphone than Leaflet. Also leaflet is a little simpler. There are some good intros on the web.

4

The HTML is missing

<meta name="viewport" content="width=device-width, initial-scale=1">

, see https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag.