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

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.

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 :

$longitude = $_GET["lon"];
$latitude = $_GET["lat"];
  <div id="mapdiv"></div>
  <script src=""></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" );
    markers.addMarker(new OpenLayers.Marker(lonLat));
    map.setCenter (lonLat, zoom);

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.

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.

The HTML is missing

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

, see