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 应用程序?