how to set the css for Iphone?-CodePudding

I know the question is weird but I am having this problem for the first time and need your guidance. the issue is, in the local environment as well as in the deployed version the images and buttons are looking good but just for android and PCs. it looks like this:

but on iPhone it looks like this:

so the responsiveness of the navbar also the resolution of the images is getting lower on iPhone but it is okay on android and PC. the app is a react app and here's the link to it

https://guileless-dango-ae93bb.netlify.app/

please guide me on how I can resolve this issue?

EDITED: issue resolved, I fixed the background image and navbar position. Basically i had to set the svg width to auto and I had to remove the background fixed position on safari browser

CodePudding user response：

I think there could be different solutions. One would be to declare the whole header as a flexbox and set the button to the right side with margin-left: auto;. You also could just care about the CSS for an iPhone with specific CSS rules, for example:

@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
   /* CSS for other than iOS devices */ 
}