GoogleMapsApiを使用してwebアプリを作ったときに、スマホで見るとGoogleMap上の文字が小さく見づらいという事象があり悩みました。

GoogleMapsApiの設定が悪いのか、CSSの設定が悪いのかと色々試してうまくいきませんでしたが、結局HTMLのビューポート（viewport）の設定漏れが原因でした。

パソコン向けサイトをスマートフォンで表示すると、文字などが小さすぎて見づらくなるのでビューポートを指定することで回避できます。

ビューポートは、HTMLのmeta要素で値を指定することで変更できます。

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<TITLE>ＭｅｍｏｒｙＭａｐ</TITLE>
</HEAD>

以下の様に良い感じになります。

width=device-widthは、横幅がデバイスの横幅となるような指定です。

initial-scale=1は、初期の表示倍率という指定です。 値に1を指定したのでそのままの倍率で表示されることになります。  

ビューポートの設定なんて当たり前の話かもしれませんが。。。笑

共有しておきます。