为什么我的页面无法仅在移动设备中正确呈现？

Question

<div class="MsgBody" style="width: 90%;align-self: center;margin: 3vh 0;flex-direction: column;display: flex;">
    <div class="MsgRight" style="flex-direction: row;width: 50%;align-self: flex-end;justify-content: flex-end;display: flex;">
        <div class="MsgSendContent" style="background-color: #9eea6a;border-radius: 5px;padding: 10px;word-break: break-word;flex-shrink: 0;display: flex;">
555        </div>
        <div class="RightTriangle" style="margin-top: 8px;width: 0;height: 0;border-style: solid;border-width: 7.5px 0 7.5px 10px;border-color: transparent transparent transparent #9eea6a;flex-shrink: 0;margin-right: 8px;display: flex"></div>
        <div class="HeadImg RightHeadImg" style="background-image: url(/img/testhead.jpg);height: 40px;width: 40px;border-radius: 5px;background-position: center;background-size: cover;background-repeat: no-repeat;flex-shrink: 0;display: flex;"></div>
    </div>
</div>

在PC端，它运行良好：

在Chrome Toggle设备工具栏中，我尝试了所有设备，并且它们也都可以正常工作。

好吧，当我在iPhone 6s中使用IOS 13.1.2的Chrome浏览器运行页面时，结果是这样的：

如您所见，消息对话框无法正确呈现，底部的输入框尚未出现。

然后我尝试了野生动物园，问题仍然存在。而且，我尝试使用的是android 9的android设备，输入框不再丢失，但是消息对话框仍无法正确呈现。

该问题仅在移动设备上发生，而在Chrome Toggle设备工具栏上不发生。我几乎不知道如何调试和解决它。

我不仅应该在此处发布URL，而且不知道问题出在哪里。

请帮助我解决这个问题，并告诉我为什么即使我在PC和移动设备上使用Chrome时，渲染效果也不一样。

谢谢。

Answer 1

正在发生这种情况，因为您的页面没有响应 集成了bootstrap，因此您不必手动编写CSS文件，也无需将预构建类与bootstrap网格配合使用即可创建响应页面 有一些可用于引导程序的教程，我希望您能仔细阅读。 我个人最喜欢的是： https://www.w3schools.com/bootstrap/default.asp