iPhone bugün, daha önce hiç olmadığı kadar popüler. Müşterilerinizin iOS cihazlarına aldıkları e-postaların kusursuz olduğunda emin olun.
iOS cihazlar hakkında yardım edebilecek ipuçlarının listesi şöyle:
- iOS cihazlarla medya sorgularını kullanabilirsiniz.
- iPhone, e-postanızı en büyük ögeye dayalı olarak yeniden boyutlandırabilir.
- iPhone’daki fontlar varsayılan olarak büyütülmüştür.
- iOS’ta kelimeler bazen garip şekilde kaydırılabilirler.
- 102k üzeri mesajları iOS’un kırpmasını engelleyin.
- iOS’un telefon numaralarınızı hyperlink’lere dönüştürmesini engelleyin.
iOS cihazlarla medya sorgularını kullanabilirsiniz.
Gömülü CSS’nizde medya sorguları kullanabilirsiniz:
@media only screen and (max-device-width: 480px) {
/* Burada Android ya da iPhone e-posta istemcileri için
kurallar ekleyebilirsiniz. HER ZAMAN ID KULLANIN!!!
Android, “class” bildirimlerini desteklemez.
Cihaz ekran ölçüleri şu şekildedir:
iPhone: 320px X 480px - yatay, 480px X 320px - dikey
Android:350px X 480px - yatay, 480 X 350 - dikey
(Bunlar ortalama ölçülerdir, Android işletim sistemi
birçok farklı cihazda çalışmaktadır.
*/
}
@media only screen and (min-device-width: 768px) {
/* Burada iPad’in e-posta istemcisi için kurallar ekleyebilirsiniz.
Piksel cinsinden cihazın ölçüleri:
768 x 1024 – yatay, 1024 x 768 - dikey
*/
}
Bu arada, medya sorguları Gmail’in mobil versiyonunda çalışmıyorlar.
- iPhone, e-postanızı en büyük ögeye dayalı olarak yeniden boyutlandırabilir.
Bu sorunun, bir tablo yapısının tüm ögeleri daha küçük olmaya zorladığı bir örneğine bakalım. Üstteki görselin genişliği 600px ve altında da küçük bir table hücresi var. Sağdaki görselde iPhone, e-postayı ekrana uydurmak için, e-postadaki her ögenin boyutunu yaklaşık %50 oranında düşürüyor ve bunun sonucunda da metinleri çok küçük hale getiriyor. Soldaki görsel ise, görseli uygun bir şekilde boyutlandırmak için medya sorgularının kullanıldığı ve metnin de ayanı şekilde uygun genişliği almasını sağlayan bir örnek.
İki seçenek var:
- Aynı görseli yeniden boyutlandırın ve yenidne kullanın (genel dosya boyutu açısından daha iyi)
<style type=“text/css”>
@media only screen and (max-device-width:480px; ) {
body[yahoo] .header { width:300px}
}
</style>
<body yahoo=“fix”>
<img src=“http://www.url.com/image.jpg” class=“header” width=“600” height=“100” />
</body>
- Görseli tamamen değiştirin.
- iPhone’daki fontlar varsayılan olarak büyütülmüş.
Bunun etkileri genelde belirsizdir, ancak bu bile şablonu bozmaya yetebilir. Aşağıdaki örnekte, responsive temamızın navigasyon ögelerinin, font boyutundaki artış sebebiyle 1 yerine 2 satır kapladıklarını görebilirsiniz.
iPhone’da uluslararası olarak font ayarlamalarını kontrol etmek için, şu konu gömülü CSS’nize eklemeyi deneyin:
<style>
* {-webkit-text-size-adjust: none}
</style>
Ya da aşağıdaki kodu ekleyerek metni duruma göre kontrol edebilirsiniz:
<font style=”-webkit-text-size-adjust: none”>
Example
</font>
- Kelimeler iOS’ta bazen garip bir şekilde kaydırılabilirler.
Eğer metniniz, genişliği metnin genişliğinden daha dar olan bir container içindeyse, cihazda kötü bir şekilde kaydırılabilir.
Bunu düzeltmek için, aşağıdaki kodu ilgili container koduna ekleyin
<td style=“word-wrap:normal”>text</td>
- 102k üzeri mesajları iOS’un kırpmasını engelleyin.
Bazen iOS okuyucu, söz konusu e-postanın yalnızca küçük bir bölümünü gösterebilir. Bu durum meydana geldiğinde okuyucu, yüklenen kısmı işler ve alt tarafta “Kalan XX byte’ı indirin” ifadesini içeren bir buton gösterir. Şöyle bir şey:
(Alttaki butonu görmek için aşağı devam edin)
Bunu düzeltmek için, boşluklar ve satırbaşları da dahil olmak üzere </head> etiketinizden önce en az 1019 karakterlik bir metne sahip olduğunuzdan emin olun.
Eğer daha fazla stile ya da stil bloğuna ihtiyacınız yoksa, birden fazla boşluk satırı girmeyi deneyin.
Bir diğer seçenek de <head> etiketlerinizi tamamen kaldırmak. Bu çözümü uygularken dikkatli olun; bazı e-posta hizmet sağlayıcıları, e-postanıza dinamik olarak head etiketlerini ekleyebilirler.
- iOS’un telefon numaralarınızı hyperlink’lere dönüştürmesini engelleyin.
Varsayılan olarak, iOS’taki Safari bir telefon numarası formatına sahip olan herhangi bir metni tespit eder ve onu, kullanıcının sadece dokunarak kolaylıkla arama yapabileceği bir linke dönüştürür.
Bunun gibi bir otomatik formatlama özelliğini devre dışı bırakmak için, şu meta etiketini eklemeniz yeterli:
<meta name=“format-detection” content=“telephone=no”>