如何避免Microsoft Teams Android端自适应卡片裁剪及识别设备类型

针对你遇到的问题，我分两部分来给出实用的解决方案，都是基于Bot Framework和Teams生态的实践经验：

一、通过Microsoft.Bot.Connector识别设备类型 #

Teams会在发送给Bot的Activity对象的ChannelData字段里携带客户端设备信息，你可以从中直接提取平台类型（比如Android、Windows）。用C#开发的话，代码示例如下：

// 在处理对话的OnTurnAsync方法中
var channelData = turnContext.Activity.ChannelData as JObject;
string devicePlatform = null;

if (channelData != null && channelData.ContainsKey("clientInfo"))
{
    var clientInfo = channelData["clientInfo"] as JObject;
    devicePlatform = clientInfo["platform"]?.ToString();
}

// 此时devicePlatform的值可能为"Android"、"Windows"、"iOS"等

拿到这个平台标识后，你就可以在LG文件里根据不同设备渲染对应的自适应卡片布局了。

二、修复Android端自适应卡片裁剪的问题 #

你的卡片用了三个width: auto的Column来放置按钮，这种布局在桌面端勉强可用，但Android端屏幕宽度有限，加上按钮文本较长，很容易出现裁剪或被迫垂直排列的问题。这里有几个可行的修复方案：

1. 改用弹性宽度的Column布局 #

把三个Column的width从auto改成1fr，让它们平分可用宽度，这样在桌面端能保持并排显示，移动端会自动压缩按钮尺寸以适配屏幕：

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "1fr",
          "items": [
            {
              "type": "ActionSet",
              "actions": [
                {
                  "type": "Action.Submit",
                  "title": "Ja, einverstanden.",
                  "data": {
                    "msteams": {
                      "type": "messageBack",
                      "text": "Ja, einverstanden.",
                      "displayText": "Ja, einverstanden."
                    }
                  }
                }
              ]
            }
          ]
        },
        {
          "type": "Column",
          "width": "1fr",
          "items": [
            {
              "type": "ActionSet",
              "actions": [
                {
                  "type": "Action.Submit",
                  "title": "Nein",
                  "data": {
                    "msteams": {
                      "type": "messageBack",
                      "text": "Nein",
                      "displayText": "Nein"
                    }
                  }
                }
              ]
            }
          ]
        },
        {
          "type": "Column",
          "width": "1fr",
          "items": [
            {
              "type": "ActionSet",
              "actions": [
                {
                  "type": "Action.Submit",
                  "title": "Weitere Infos",
                  "data": {
                    "msteams": {
                      "type": "messageBack",
                      "text": "Weitere Infos",
                      "displayText": "Weitere Infos"
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

2. 针对移动端改用垂直按钮布局 #

结合之前识别的设备类型，在LG文件中编写两个模板：一个给桌面端用水平ColumnSet，一个给Android端用垂直排列的ActionSet。示例LG代码如下：

> [!TEMPLATE DesktopButtonsCard]
{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        // 桌面端水平按钮布局（和你原代码结构一致）
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

> [!TEMPLATE MobileButtonsCard]
{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Ja, einverstanden.",
          "data": {
            "msteams": {
              "type": "messageBack",
              "text": "Ja, einverstanden.",
              "displayText": "Ja, einverstanden."
            }
          }
        },
        {
          "type": "Action.Submit",
          "title": "Nein",
          "data": {
            "msteams": {
              "type": "messageBack",
              "text": "Nein",
              "displayText": "Nein"
            }
          }
        },
        {
          "type": "Action.Submit",
          "title": "Weitere Infos",
          "data": {
            "msteams": {
              "type": "messageBack",
              "text": "Weitere Infos",
              "displayText": "Weitere Infos"
            }
          }
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

> [!TEMPLATE AdaptiveButtonsCard]
# if(${devicePlatform} == 'Android')
[MobileButtonsCard]
# else
[DesktopButtonsCard]
# end

之后在Bot代码里，把识别到的devicePlatform作为变量传给LG模板，就能自动渲染对应设备的卡片了。

3. 缩短按钮文本（快速临时修复） #

如果暂时不想调整布局，可以把较长的按钮文本简化，比如把"Ja, einverstanden."改成"Ja"，同时保持data里的文本不变，这样既不影响Bot接收的指令，又能缩小按钮宽度避免裁剪：

{
  "type": "Action.Submit",
  "title": "Ja",
  "data": {
    "msteams": {
      "type": "messageBack",
      "text": "Ja, einverstanden.",
      "displayText": "Ja, einverstanden."
    }
  }
}

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