モバイルデバイスを使用しているときにマップボックスマーカーにポップアップを表示したい

Question

データセットからマーカーをインポートしたマップボックス上にマップを作成しています。マーカはデスクトップ上で完全に動作するポップアップを持っていますが、モバイル上で見ると画面の端から出血します。以下はこのポップアップの作成に使用したコードです。モバイルに切り替えるときにこのポップアップサイズを変更したり、表示画面に応じてサイズを調整したりするにはどうすればよいですか？

map.on('click', function(e) { 
     var features = map.queryRenderedFeatures(e.point, { 
     layers: ['American Eats'] // replace this with the name of the layer 
     }); 
     if (!features.length) { 
     return; 
     } 
     var feature = features[0]; 
     var popup = new mapboxgl.Popup({ offset: [0, -15] }) 
     .setLngLat(feature.geometry.coordinates) 
     .setHTML('<h3>' + feature.properties.Title + '</h3><h4>' + feature.properties.Adress + '</h4><p>' + feature.properties.Description + '</p>') 
     .setLngLat(feature.geometry.coordinates) 
     .addTo(map); 
    }); 

Answer 1

これはCSSで簡単に行うことができます。これらの線に沿ったもの：

@media only screen and (max-width: 480px) { 
    .mapboxgl-popup-content { 
     max-width: 250px; 
    } 
    .mapboxgl-popup-content div { 
     padding:0em; 
    } 
    .mapboxgl-popup-content p { 
     margin: 0.5em 0.5em; 
    } 
} 

ポップアップを小さくするために必要な設定を調整します。私はこのアプローチをHipster Map of Melbourneで使っています。非常に小さなブラウザウィンドウで試して、ポップアップがどのように縮小するかを見てください。