Mobil cihazlar için HTML e-postasında yazı tipi boyutu için vw (viewport genişliği) kullanmak tamam mı?

Question

Bir HTML e-posta şablonu oluşturuyorum. Masaüstü sürümü tablolarla yapılır, birkaç satır içi css, tüm boyutlar% veya px değerlerinde tanımlanır.

Mobil sürüm için div ve css ile çalışıyorum. Şimdi, görünüm genişliğine bağlı olarak bazı metinleri yeniden boyutlandırmak istiyorum. Çünkü bazı başlıkların yazı tipi boyutunu 28px olarak tanımlarsam, o zaman belirli bir metin daha geniş bir aygıtta Tamam görünebilir, ancak daha küçük bir aygıtta metin genişler ve sonraki satıra geçer. Şimdi

böyle baz font-size ayar düşünüyorum: Böyle mi

:root { 
 
    font-size: calc(8px + 4vw); 
 
}

<h1> 
 
    Header 1 
 
</h1> 
 
<h2> 
 
    Header 2 
 
</h2> 
 
<p> 
 
    Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum. 
 
</p>

(etkisini görmek için tam sayfa modunda çalıştırmak pasajı ve sonra penceresini yeniden boyutlandırmak) sonraki yazı tipi boyutları, görünüm genişliğine bağlı olarak ölçeklenir, başlık, daha küçük aygıtlarda küçülür, metnin bozulmasına engel olur veya en azından daha az olasıdır. Calc() işlevini kullanarak da belirli bir minimum tanımladım, bu yüzden metin çok küçük olmayacak.

Şimdi sorum şu: e-posta (mobil) için bunu kullanmanın yararı yoksa veya mobil e-posta istemcileri tarafından kötü şekilde destekleniyor mu? Tarayıcı desteği oldukça iyi, ancak mobil e-posta istemcisinin desteğiyle ilgili hiçbir bilgi bulamadım.

Answer 1

Merhaba, her zaman http://caniuse.com numaralı telefondan css öznitelikleri desteğini kontrol edebilirsiniz. Bunu buldum: iOS 8.4 ve Android 4.4 ve üstü desteği gösteren http://caniuse.com/#search=vw. O kadar da iyi değil ve birçok insanın hala iOS7'de olduğunu hayal ediyorum (tamam, belki sadece ben!).

Özetle kabul ediyorum, muhtemelen her yerde çalışan bu techinque çalışmasına güvenmemelisiniz.

Answer 2

Px, müşteriler ve aygıtlar arasında HTML e-posta geliştirmede yazı tipi boyutu için yalnızca tutarlı birim beyanıdır. (https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/).

Mobil tasarımda, daha büyük metin genellikle daha iyidir, ancak manşetlerin veya diğer öğelerin tasarıma uyacak şekilde küçültülmesi gereken zamanlar vardır. Burada en iyi seçeneğiniz, e-postayı bir 'mobil ilk' tasarımla oluşturmak ve daha sonra masaüstü bilgisayarlar için genişletmek için medya sorguları ve MSO koşullarını kullanmaktır. E-postanın% 50'den fazla bir mobil cihaz (http://www.emailmonday.com/mobile-email-usage-statistics) ve Gmail ve tamamen stil etiketi sıyırma diğer birçok üçüncü parti e-posta uygulamalarından üzerinde açılırken ile

, varsayılan mobil olmak zorunda daha mantıklı.

Gmail web istemcisinin daha iyi davranmasına yardımcı olacak seçenekler de var: (http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/) Sınıf ve kimlik çalışmazsa da, lang niteliğini (veya yakın zamanda test edilen özeti veya aria-labelledby özniteliklerini) kullanarak stil uygulayabilirsiniz. Gmail'in web posta sürümünün düzenini bir dereceye kadar kontrol edin.