使聊天机器人在手机/平板电脑上全屏显示

Question

我已将聊天机器人集成到一个网站上，单击一个按钮即可在屏幕的右下方打开该网站。我只需要该机器人即可在单击按钮时自动适应所有移动/平板电脑屏幕设备。 注意：我希望该漫游器占据整个移动/平板电脑设备的屏幕。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container">
  <button class="btn askQuestion"><img src="images/question.png" /> Ask a Question</button>
  <div id="chat_window_1" class="row chat-window col-xs-6 col-md-4" style="margin-left:10px;">
    <div class="col-xs-12 col-md-12">
      <div class="panel panel-default noBorder">
        <div class="panel-heading top-bar chat-heading">
          <div class="col-md-8 col-xs-8 noLRP">
            <h3 class="panel-title ChatTitle"><img src="images/32x32.png" class="titleImg" />DPOPlus Q&A</h3>
            <!-- <img src="images/chat-logo.png" alt="Dominer" /> -->
          </div>
          <div class="col-md-4 col-xs-4" style="text-align: right;">
            <!-- <a href="#"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>-->
            <a id="expand" href="#"><span class="glyphicon glyphicon-new-window"></span></a>
            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
          </div>
        </div>
        <div id="response" class="panel-body msg_container_base"></div>
        <div id="footdiv" class="panel-footer">
          <div class="input-group">
            <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message..." />
            <span class="input-group-btn">
              <button class="btn btn-sm sendBtn" id="btn-chat"><img src="images/send.png"></button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>   
</div>