Is there a way to hide elements (e.g. s or s) in HTML-mails when they are viewed by Apple mail-clients (Apple Mail on Desktop OS and iOS)?
Maybe there is an easy way via CSS's -webkit properties?
I think you can use media query to do so, here is some extra code. And then by usin displaying none or block you can hide elements. I hope you are aware of media queries.
<!-- iPhone standard resolution 320x460 (landscape not needed because all web apps start portrait on iPhone) -->
<link rel="apple-touch-startup-image" href="splash-320x460.jpg" media="(device-width: 320px)" />
<!-- iPhone high resolution (retina) 640x920 pixels (landscape not needed because all web apps start portrait on iPhone) -->
<link rel="apple-touch-startup-image" href="splash-640x920.jpg" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" />
<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" href="splash-768x1004.jpg" media="(device-width: 768px) and (orientation: portrait)" />
<!-- iPad Landscape 748x1024 (yes, a portrait image but with content rotated 90 degrees - allows 20px for status bar) -->
<link rel="apple-touch-startup-image" href="splash-748x1024.jpg" media="(device-width: 768px) and (orientation: landscape)" />
<!-- iPad retina Portrait 1536x2008 -->
<link rel="apple-touch-startup-image" href="splash-1536x2008.jpg" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<!-- iPad retina Landscape 1496x2048 (yes, a portrait image but with content rotated 90 degrees - allows 40px for status bar) -->
<link rel="apple-touch-startup-image" href="splash-1496x2048.jpg" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />