Apple Mail iOS
Apple Mail on iOS uses the same WebKit engine as the macOS version, providing excellent CSS support. It handles responsive design well, supports media queries, and renders most modern CSS without issues. However, the mobile viewport introduces its own considerations for touch targets and readability.
The default email client on iPhone and iPad. Consistently the #1 or #2 most-used email client globally, accounting for 30-50% of all email opens depending on the audience.
CSS coverage profile for Apple Mail iOS
Apple Mail iOS renders with the WebKit engine and supports 274 of 298 tracked CSS and HTML features fully, with 11 partially supported and 11 unsupported. That places it in a broad coverage band.
Modern CSS works largely as expected. The cost of supporting this client is low. Most production templates need only minor adjustments.
274
Supported
11
Partial
11
Unsupported
298
Total
Key gotchas in Apple Mail iOS
Auto-linking phone numbers and dates iOS automatically converts phone numbers, dates, and addresses into tappable links, adding its own blue styling. Use meta tag <meta name="format-detection" content="telephone=no"> to prevent this, or style the auto-generated links explicitly.
Minimum font size iOS may scale up fonts smaller than 13px to improve readability. Use -webkit-text-size-adjust: 100% to prevent automatic scaling.
Dark mode color inversion Like macOS, iOS Apple Mail inverts colors in dark mode. Transparent PNGs with dark content may become invisible against dark backgrounds.
How Apple Mail iOS renders email
- Apple Mail iOS shares the macOS rendering pipeline, so feature support is nearly identical. The differences are mostly viewport-related , narrower screens, no hover surface, and touch-target sizing requirements.
- Dynamic Type and Apple's accessibility text-size settings can override declared font-size on body copy. Use -webkit-text-size-adjust: 100% on critical typography to opt out.
- Auto-linking is aggressive , phone numbers, dates, addresses, and tracking numbers are all converted to tappable spans with blue underline. Wrap any non-link text that resembles these patterns in explicit anchor tags with overrides.
- Safe areas and the notch on iPhone X+ devices can clip full-bleed designs. Reserve at least 16px horizontal padding on the outer container.
Dark mode behaviour in Apple Mail iOS
Follows the device's appearance setting. Supports prefers-color-scheme media queries and color-scheme meta tags. Applies automatic inversion for emails without explicit dark mode styles , transparent images are a common casualty.
QA checklist for Apple Mail iOS
- Test with the device set to maximum Dynamic Type to surface auto-scaled typography that breaks layout.
- Verify dark-mode rendering on devices with True Tone enabled , colour inversion can amplify subtle contrast issues.
- Check tap-target sizes , Apple's HIG recommends 44pt minimum, which translates to roughly 44px buttons in email.
Related clients
Renders here, dropped almost everywhere else
Safe in Apple Mail iOS and almost nowhere else, so it needs a fallback the moment the send is not Apple Mail iOS-only.
Where Apple Mail iOS is weakest
- CSS Properties 12
- Pseudo-Classes & Selectors 4
- HTML Elements 2
- HTML & Email Structure 2
- HTML Attributes 1
Closest client: Apple Mail
Apple Mail agrees with Apple Mail iOS on 95% of verified features. They still differ on 14: <object>, <picture>, <select>, <svg>, <video>, @media orientation, and 8 more.
Side by side
HTML Elements48
| Feature | Support |
|---|---|
| <abbr> | Supported |
| <acronym> | Supported |
| <address> | Supported |
| <audio> | Supported |
| <base> | Supported |
| <bdi> | Supported |
| <blockquote> | Supported |
| <body> | Supported |
| <button type="reset"> | Supported |
| <button type="submit"> | Supported |
| <code> | Supported |
| <del> | Supported |
| <dfn> | Supported |
| <dialog> | Supported |
| <div> | Supported |
| <form> | Supported |
| <h1> | Supported |
| <hr> | Supported |
| <img> | Supported |
| <input type="checkbox"> | Supported |
| <input type="hidden"> | Supported |
| <input type="radio"> | Supported |
| <input type="reset"> | Supported |
| <input type="submit"> | Supported |
| <input type="text"> | Supported |
| <link> | Supported |
| <marquee> | Supported |
| <meter> | Supported |
| <object> | Supported |
| <p> | Supported |
| <picture> | Supported |
| <pre> | Supported |
| <progress> | Supported |
| <rp> | Supported |
| <rt> | Supported |
| <ruby> | Supported |
| <select> | Partial |
| <small> | Supported |
| <span> | Supported |
| <strike> | Supported |
| <strong> | Supported |
| <style> | Supported |
| <svg> | Supported |
| <table> | Supported |
| <textarea> | Supported |
| <ul> | Supported |
| <video> | Partial |
| <wbr> | Supported |
HTML Attributes22
| Feature | Support |
|---|---|
| [align] | Supported |
| [aria-describedby] | Supported |
| [aria-hidden] | Supported |
| [aria-label] | Supported |
| [aria-labelledby] | Supported |
| [aria-live] | Supported |
| [background] | Supported |
| [cellpadding] | Supported |
| [cellspacing] | Supported |
| [command] | Supported |
| [dir] | Supported |
| [height] | Supported |
| [hidden] | Supported |
| [lang] | Supported |
| [loading] | Supported |
| [popover] | Supported |
| [required] | Supported |
| [role] | Supported |
| [srcset] | Supported |
| [target] | Partial |
| [valign] | Supported |
| [width] | Supported |
HTML & Email Structure8
| Feature | Support |
|---|---|
| amp4email | Unsupported |
| anchor-links | Supported |
| doctype | Supported |
| html-comments | Supported |
| html5-semantics | Supported |
| image-maps | Supported |
| mailto-links | Supported |
| meta-color-scheme | Unsupported |
CSS At-Rules10
| Feature | Support |
|---|---|
| @font-face | Supported |
| @import | Supported |
| @keyframes | Supported |
| @media | Supported |
| @media device-pixel-ratio | Supported |
| @media hover | Supported |
| @media orientation | Partial |
| @media prefers-color-scheme | Supported |
| @media prefers-reduced-motion | Supported |
| @supports | Supported |
Pseudo-Elements6
| Feature | Support |
|---|---|
| ::after | Supported |
| ::before | Supported |
| ::first-letter | Supported |
| ::first-line | Supported |
| ::marker | Supported |
| ::placeholder | Supported |
Pseudo-Classes & Selectors34
| Feature | Support |
|---|---|
| :adjacent-sibling | Supported |
| :attribute-selector | Supported |
| :chaining | Supported |
| :checked | Supported |
| :child-combinator | Supported |
| :class-selector | Supported |
| :descendant-combinator | Supported |
| :first-child | Supported |
| :first-of-type | Supported |
| :focus | Unsupported |
| :focus-visible | Unknown |
| :focus-within | Unknown |
| :general-sibling | Supported |
| :grouping | Supported |
| :has | Supported |
| :hover | Supported |
| :id-selector | Supported |
| :lang | Supported |
| :last-child | Supported |
| :last-of-type | Supported |
| :link | Supported |
| :not | Supported |
| :nth-child | Supported |
| :nth-last-child | Supported |
| :nth-of-type | Supported |
| :only-child | Supported |
| :only-of-type | Supported |
| :target | Unsupported |
| :type-selector | Supported |
| :universal-selector | Supported |
| :visited | Unsupported |
| pseudo-class-active | Unsupported |
| pseudo-class-default | Supported |
| pseudo-class-nth-last-of-type | Supported |
CSS Functions8
| Feature | Support |
|---|---|
| calc | Supported |
| clamp | Supported |
| conic-gradient | Supported |
| fit-content | Supported |
| linear-gradient | Supported |
| max | Supported |
| min | Supported |
| radial-gradient | Supported |
CSS Properties162
Test your email in Gmail, Outlook and Apple Mail
Preview rendering, catch CSS issues, and see what Outlook does to your VML. Free, no account. All 21 clients with one.
Instant live preview · No signup required · 21 email engines
Support data last updated Sep 2, 2026 - synced from caniemail.com (MIT) via @emailens/engine.