我正在设计一个网络应用程序。这是web app的链接 当我使用 android 设备和笔记本电脑浏览它时，该设计可以正常工作。当我使用 google chrome 的开发模式（ctrl+shift+i）检查 iphoneX 上的移动兼容性时，它也可以正常工作。 但是，当我使用 iphone 运行网站时，设计将关闭。检查这些图片：
在 iphoneX 上展示的设计：
我想要的设计：
使用chrome开发设备模式：
【问题讨论】：
我可以建议您的最佳解决方案是在 css 中使用 @media 查询，这用于制作响应式网站。这基本上就是这样做的，在这里您将定义如果屏幕宽度改变或屏幕高度改变会发生什么。看看下面的例子：-
@media only screen and (max-width: 600px) {
body {
background-color: light blue;
}
}
在这个例子中，如果屏幕的最大宽度达到 600PX，则将主体的背景颜色更改为浅蓝色。在您的情况下，您正在开发一个渐进式网络应用程序，因此您必须定义如此多的媒体查询并使用边距、填充和其他元素，以便如果有人在任何设备上查看它应该看起来不错
【讨论】：