iphone和android/pc上的Web应用程序设计看起来不同

我正在设计一个网络应用程序。这是到那个的链接 当我使用android设备和我的笔记本电脑浏览它时，这个设计就像我想要的那样工作。当我使用google chrome的开发模式（ctrl+shift+i）检查iPhone上的移动兼容性时，它也可以正常工作。 然而，当我使用iphone运行该网站时，设计将停止。检查以下图片：

iPhone上显示的设计：

我想要的设计：

使用chrome开发设备模式：

---

我建议您最好的解决方案是在css中使用

@media quires

，这用于创建响应性强的网站。这基本上是这样的，在这里你将定义如果屏幕宽度改变或屏幕高度改变会发生什么。请看以下示例：-

@media only screen and (max-width: 600px) {
  body {
    background-color: light blue;
  }
}

在这个例子中，我们说，如果屏幕的最大宽度达到600PX，将主体的背景色更改为浅蓝色。在您的情况下，您正在开发一个渐进式web应用程序，因此您必须定义如此多的媒体查询，并使用边距、填充和其他元素，这样，如果有人在任何设备上查看，它应该看起来很好