Blog
Repurpose your Images for Mobile Email |
|
10.19.2011 Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
|
| |
|
By mklann
December 20, 2011 Customize your email for the new Xoom, Kindle Fire, and iPad Tablets!
<style type="text/css">
/*PLEASE NOTE: this has only been tested in native device
email clients, not in device web browsers*/
/*Here are the device dimensions:
Iphone: 320px X 480px
Smartphones: Vary from 240×320 to 720×1280
Android Phone (most popular): 350px X 480px
Additional Android Phones: 480×800 or 540×960
Xoom: 1280×800
Kindle Fire: 1024 x 600
iPad: 768 x 1024 */
/*iphone, android, and most common smartphones --------*/
@media only screen and (max-device-width: 480px) {
body[yahoo] #desktop { display:none}
body[yahoo] #ai { display:block !important}
body[yahoo] #smartphone { display:block !important}
}
/*iphone only --------*/
@media only screen and (device-width: 320px) {
body[yahoo] #desktop { display:none}
body[yahoo] #iphone{ display:block !important}
}
/*kindle and iPad (portrait and landscape) --------*/
@media only screen and (min-device-width: 590px) and
(max-device-width:1024px){
body[yahoo] #desktop { display:none}
body[yahoo] #ki { display:block !important}
}
/*kindle, iPad, and Xoom (portrait and landscape) --------*/
@media only screen and (min-device-width: 590px) and
(max-device-width: 1280px){
body[yahoo] #desktop { display:none}
body[yahoo] #kix { display:block !important}
}
/*kindle (portrait) only ==> landscape is the default,
the portrait conditional is not supported. If this device is
in landscape view, it will pick up on the iPad media
queries below---------- */
@media only screen and (device-width: 594px) {
body[yahoo] #desktop { display:none}
body[yahoo] #kindle{ display:block !important}
}
/* iPad only (landscape & portrait)----------- */
@media only screen and (min-device-width: 768px)
and (max-device-width: 1024px){
body[yahoo] #desktop { display:none}
body[yahoo] #ipad { display:block !important}
}
/* iPad (landscape only) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body[yahoo] #desktop { display:none}
body[yahoo] #ipad_landscape { display:block !important}
}
/* iPad (portrait only) ----------- */
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body[yahoo] #desktop { display:none}
body[yahoo] #ipad_portrait { display:block !important}
}
/*xoom only*/
@media only screen and (min-device-width: 1280px)
and (max-device-width: 1280px){
body[yahoo] #desktop { display:none}
body[yahoo] #xoom { display:block !important}
}
</style>
...
<body yahoo="fix">
<div id="kindle" style="display:none">Kindle Fire</div>
<div id="ipad" style="display:none">iPad</div>
<div id="ipad_portrait" style="display:none">iPad Portrait</div>
<div id="ipad_landscape" style="display:none">iPad Landscape</div>
<div id="iphone" style="display:none">iPhone</div>
<div id="xoom" style="display:none">Xoom</div>
<div id="ai" style="display:none">iPhone & Android</div>
<div id="ki" style="display:none">Kindle & iPad</div>
<div id="kix" style="display:none">Kindle & iPad & Xoom</div>
<div id="android" style="display:none">Android</div>
<div id="smartphone" style="display:none">Smartphone</div>
<div id="desktop">This is the desktop view</div>
</body>
|
|
Tis the season over here at Email on Acid and we have tons of shiny, new devices on our desks just begging for a test drive. Fortunately for every computer lover on the planet, the Kindle Fire, Xoom, iPad, and iPhone are up front and center this holiday season and we are anticipating record sales from Amazon, Motorola, Apple and several more mobile & tablet carriers. 
Comments
If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!
Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
