如何为 Iphone 设置 css？
how to set the css for Iphone?
我知道这个问题很奇怪，但我是第一次遇到这个问题，需要您的指导。
问题是，在本地环境和部署版本中，图像和按钮看起来不错，但仅适用于 android 和 PC。
它看起来像这样：
但在 iPhone 上它看起来像这样：
因此导航栏的响应速度以及图像的分辨率在 iPhone 上越来越低，但在 android 和 PC 上没问题。
该应用程序是一个 React 应用程序，这是 link
https://guileless-dango-ae93bb.netlify.app/
请指导我如何解决这个问题？
已编辑：
问题已解决，我修复了背景图像和导航栏位置。基本上我必须将 svg 宽度设置为自动并且我必须删除 safari 浏览器上的背景固定位置
我认为可能有不同的解决方案。一种是将整个 header 声明为弹性框，并使用 margin-left: auto; 将按钮设置在右侧。您也可以只关心具有特定 CSS 规则的 iPhone 的 CSS，例如：
@supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}
我知道这个问题很奇怪，但我是第一次遇到这个问题，需要您的指导。
问题是，在本地环境和部署版本中，图像和按钮看起来不错，但仅适用于 android 和 PC。
它看起来像这样：
但在 iPhone 上它看起来像这样：
因此导航栏的响应速度以及图像的分辨率在 iPhone 上越来越低，但在 android 和 PC 上没问题。 该应用程序是一个 React 应用程序，这是 link
https://guileless-dango-ae93bb.netlify.app/
请指导我如何解决这个问题？
已编辑： 问题已解决，我修复了背景图像和导航栏位置。基本上我必须将 svg 宽度设置为自动并且我必须删除 safari 浏览器上的背景固定位置
我认为可能有不同的解决方案。一种是将整个 header 声明为弹性框，并使用 margin-left: auto; 将按钮设置在右侧。您也可以只关心具有特定 CSS 规则的 iPhone 的 CSS，例如：
@supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
@supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}