[WSG] Mobile detection using CSS media queries
Hi, Is it safe to use just css media to target mobile devices such as iphone, blackberry, android phones? And assume if I'm only embedding 1 stylesheet with various media queries in it, would there be any lag in the page style load? Has anyone got some good examples/articles for targeting mobile platforms? Cheers Caleb *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Mobile detection using CSS media queries
Hey Caleb, This is probably one of those case by case decisions. For some small sites, simple media queries may be fine. However, if you have a large site, or high levels of mobile traffic, you may want to consider more robust alternatives - such as device detection etc. This article is a little heavy handed - but worth reading: CSS Media Query for Mobile is Fool’s Gold http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Good luck Russ On 03/05/2011, at 5:16 PM, Caleb Wong wrote: Hi, Is it safe to use just css media to target mobile devices such as iphone, blackberry, android phones? And assume if I'm only embedding 1 stylesheet with various media queries in it, would there be any lag in the page style load? Has anyone got some good examples/articles for targeting mobile platforms? Cheers Caleb *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Mobile detection using CSS media queries
On 5/3/11 3:16 AM, Caleb Wong wrote: Hi, Is it safe to use just css media to target mobile devices such as iphone, blackberry, android phones? And assume if I'm only embedding 1 stylesheet with various media queries in it, would there be any lag in the page style load? Has anyone got some good examples/articles for targeting mobile platforms? Cheers Caleb Generally, and for new small sites, that approach works well. But one size does not necessarily fit all... Depending on your particular situation and need this article on mobile optimization and strategy may be helpful. http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/ Best, ~d -- http://chelseacreekstudio.com/ http://chelseacreekstudio.com/fa/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Mobile detection using CSS media queries
Hi Caleb, You might find this site interesting/helpful: http://mediaqueri.es/ I plan on using that site as a reference when I re-build my work's website in the coming months. Good luck! Cheers, Micky *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Mobile detection using CSS media queries
Also worth adding that mobile browsers generally lie about their width, so to get mediaqueries to be effective you need to get them to behave nice and report their real viewport dimensions (and, in the case of high-dpi devices on android, also need to tell them not to lie again with their dpi adjustment). The Opera article already mentions this, but still worth having a look at my recent preso (slide 50 onwards) http://www.slideshare.net/redux/mobilefriendly (don't be put off by the title slide in russian, the rest is in english ;) ) P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ __ twitter: @patrick_h_lauke | skype: patrick_h_lauke __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***