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 233 of 251 tracked CSS and HTML features fully, with 9 partially supported and 9 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.
233
Supported
9
Partial
9
Unsupported
251
Total
Key gotchas in Apple Mail iOS
Auto-linking phone numbers and datesiOS 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 sizeiOS may scale up fonts smaller than 13px to improve readability. Use -webkit-text-size-adjust: 100% to prevent automatic scaling.
Dark mode color inversionLike 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
HTML Elements40
| Feature | Support |
|---|---|
| <abbr> | Supported |
| <acronym> | Supported |
| <address> | Supported |
| <audio> | Supported |
| <base> | Supported |
| <bdi> | Supported |
| <blockquote> | Supported |
| <body> | Supported |
| <code> | Supported |
| <del> | Supported |
| <dfn> | Supported |
| <dialog> | Supported |
| <div> | Supported |
| <form> | Supported |
| <h1> | Supported |
| <hr> | Supported |
| <img> | 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 |
CSS At-Rules5
| Feature | Support |
|---|---|
| @font-face | Supported |
| @import | Supported |
| @keyframes | Supported |
| @media | Supported |
| @supports | Supported |
Pseudo-Elements6
| Feature | Support |
|---|---|
| ::after | Supported |
| ::before | Supported |
| ::first-letter | Supported |
| ::first-line | Supported |
| ::marker | Supported |
| ::placeholder | Supported |
Pseudo-Classes & Selectors32
| 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 |
| :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 Properties160
Test your email across all 15 clients
Preview rendering, catch CSS issues, and get actionable fixes — free.
Try Emailens FreeSupport data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.