As any web developer has learned over the years, you are always stuck coding for different platforms. Back in the day, it was making sure your website worked on both Netscape and Internet Explorer. In today’s mobile arena, we are faced with even more options. I’m not even talking about the Android verses iPhone either. In just the Apple world we have to keep track of the iPod Touch, iPhone, and the iPad, the latter two with Retina display options that further complicate things.<\/p>\n
In CSS3, this is actually pretty easy to do with media queries. If you use CSS, which you should if you call yourself a web developer, then the following should be rather intuitive.<\/p>\n
<\/code><\/p>\n Just make sure for Retina screens that you are “squishing” the larger image into the smaller CSS container. If you don’t know what I mean, be sure to read yesterday’s blog entry on HTML5 Canvas and Retina Displays<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" As any web developer has learned over the years, you are always stuck coding for different platforms. Back in the day, it was making sure your website worked on both Netscape and Internet Explorer. In today’s mobile arena, we are faced with even more options. I’m not even talking about the Android verses iPhone either. <\/p>\n\/* Non-Retina *\/\r\n@media screen and (-webkit-max-device-pixel-ratio: 1) {\r\n}\r\n\r\n\/* Retina *\/\r\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\r\nonly screen and (-o-min-device-pixel-ratio: 3\/2),\r\nonly screen and (min--moz-device-pixel-ratio: 1.5),\r\nonly screen and (min-device-pixel-ratio: 1.5) {\r\n}\r\n\r\n\/* iPhone Portrait *\/\r\n@media screen and (max-device-width: 480px) and (orientation:portrait) {\r\n} \r\n\r\n\/* iPhone Landscape *\/\r\n@media screen and (max-device-width: 480px) and (orientation:landscape) {\r\n}\r\n\r\n\/* iPad Portrait *\/\r\n@media screen and (min-device-width: 481px) and (orientation:portrait) {\r\n}\r\n\r\n\/* iPad Landscape *\/\r\n@media screen and (min-device-width: 481px) and (orientation:landscape) {\r\n} \r\n<\/pre>\n
more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,3],"tags":[36,9,37],"class_list":["post-566","post","type-post","status-publish","format-standard","hentry","category-blog","category-ios-development","tag-css3","tag-development","tag-retina"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/566"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":3,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/566\/revisions"}],"predecessor-version":[{"id":569,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/566\/revisions\/569"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=566"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}