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

Posted 2023-05-06

【中文标题】Web 应用程序设计在 iphone 和 android/pc 上看起来不同

【英文标题】：Web app design looks different on iphone and android/pc

【发布时间】：2020-12-16 23:10:46

【问题描述】：

我正在设计一个网络应用程序。这是web app的链接 当我使用 android 设备和笔记本电脑浏览它时，该设计可以正常工作。当我使用 google chrome 的开发模式（ctrl+shift+i）检查 iphoneX 上的移动兼容性时，它也可以正常工作。 但是，当我使用 iphone 运行网站时，设计将关闭。检查这些图片：

在 iphoneX 上展示的设计：

我想要的设计：

使用chrome开发设备模式：

【参考方案1】：

我可以建议您的最佳解决方案是在 css 中使用 @media 查询，这用于制作响应式网站。这基本上就是这样做的，在这里您将定义如果屏幕宽度改变或屏幕高度改变会发生什么。看看下面的例子：-

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

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