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

Posted

技术标签:

【中文标题】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,则将主体的背景颜色更改为浅蓝色。在您的情况下,您正在开发一个渐进式网络应用程序,因此您必须定义如此多的媒体查询并使用边距、填充和其他元素,以便如果有人在任何设备上查看它应该看起来不错

【讨论】:

以上是关于Web 应用程序设计在 iphone 和 android/pc 上看起来不同的主要内容,如果未能解决你的问题,请参考以下文章

是否可以将 Android 数据库用于 iphone 应用程序?

移动端和pc端,响应式设计布局

iPhone 6s plus 上的字体大小

专为 iPhone 5 设计的应用程序,在 iPhone 4S 上显示部分剖视图

iPhone 主屏幕 Web 应用程序和保持登录状态

如何为 iphone 3.5 和 iphone 4 英寸屏幕(ios 6 和 ios7)设计 Single xib?