You can use the following CSS rules to differentiate between iOS and other devices.
CSS rule:
@supports not (-webkit-touch-callout: none) {
/* This CSS rules will be applied for other than iOS devices, can be used for Android. */
}
@supports (-webkit-touch-callout: none) {
/* This CSS rules will be applied for iOS devices */
}
Remember that user-agent and operating system detection can be untrustworthy, especially with the increased use of browser spoofing and browser extensions. As a result, it is always advisable to test your CSS on various devices and browsers before publishing it.
It’s worth noting that a responsive design that adapts to different screen sizes, rather than different platforms, is a more dependable and maintainable approach.
Further, you can use JavaScript
You can use JavaScript to detect a device’s operating system and apply appropriate CSS styles. As an example:
if (navigator.userAgent.indexOf(“Android”) != -1) { /* Android-specific CSS styles go here */ } else if (navigator.userAgent.indexOf(“iPhone”) != -1) { /* iOS-specific CSS styles go here */ }
Above,
This code makes use of JavaScript to determine the user’s device and then applies the appropriate CSS styles.
The user’s browser and device information are included in the string that the userAgent property returns. The indexOf() method is used in this code to determine whether the strings “Android” or “iPhone” are present in the navigator. userAgent identifier.
The if clause determines whether a value other than -1 is returned by the indexOf(“Android”) method. If it does, it indicates that the navigator contains the string “Android.” Android device usage is indicated via the userAgent string. In this scenario, the code included inside the if block—which contains the CSS styles particular to Android—will be executed.