amChart「已访问国家」地图如何实现移动端响应式适配？

完全可以实现适配，不需要修改地图核心代码，按以下三步操作即可，所有代码直接复制粘贴就能用，不需要开发基础：

第一步：添加viewport适配元标签 #

打开你拿到的HTML文件，找到顶部的<head>标签，将以下代码复制粘贴到<head>内部的最靠前位置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的作用是告知移动设备按照当前屏幕的实际宽度渲染页面，不会默认缩放页面导致内容超出边界。

第二步：给地图容器添加响应式样式 #

还是在<head>标签内，放在第一步添加的viewport标签后面，粘贴以下CSS代码：

<style>
#visited_countries_map {
  width: 100% !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 400px;
  overflow-x: auto;
  touch-action: pan-x pan-y;
}
</style>

其中min-height的数值可以自行调整，数字越大地图在移动端的显示高度越高；overflow-x: auto和touch-action配置可以实现移动端滑动查看超出屏幕的地图区域。

第三步：开启地图自带的响应式配置 #

找到HTML代码中初始化amCharts地图的JS代码段，一般会包含am4core.create或者am5core.create关键词，在初始化完成的代码位置添加对应版本的代码：

// amCharts 4版本用这两行
chart.responsive.enabled = true;
chart.responsive.useDefault = true;

// 如果是amCharts 5版本，用下面这行替换上面两行
chart.appearOnScroll = true;

这段配置会开启地图自带的响应式适配逻辑，自动根据屏幕尺寸调整地图元素、文字的大小。

注意事项 #

• 修改完成后访问移动端页面时需要清除浏览器缓存，避免旧代码生效看不到适配效果
• 如果地图显示高度不符合预期，直接调整第二步CSS里的min-height数值即可

内容的提问来源于stack exchange，提问作者Lisa