In 2011, high profile sites began to launch RWD versions, most notably The Boston Globe and. The RWD idea spread quickly with developers, who implemented it on their own sites and on smaller dotcom sites. This uses sophisticated coding (CSS media queries and fluid grids) to build pages that “flow” to look good on any size screen. So, soon after the iPad launched in April, 2010, Ethan Marcotte ( - building on Wroblewski’s Mobile First idea - launched what he named Responsive Web Design (shortened to Responsive Design or RWD).
#Responsive design examples ipad iphone code#
What was needed, thoughtful developers realized, is a way to code pages so that they look good on any size screen. When it became clear, though, that tablets of many sizes would proliferate, maintaining separate pages for every size was obviously impractical. With the overwhelming success of the iPad, though, it quickly became clear that tablets of various sizes were here to stay (shown nicely in designer Brad Frost’s graphic below).īefore the iPad, the idea of having separate mdot-smartphone and desktop web pages was considered difficult but possible. While there was a variety of tablet-like devices with screen sizes between smartphone and desktop before the iPad launched, they were never very popular. This approach has the great advantage that it eliminates having to maintain separate pages for small and large screens.
This is based on the idea that the best way to make web pages is to design them first for their appearance on mobile devices, and then to take into account the large-screen appearance secondarily. Accordingly, many sites, including libraries, built separate mobile pages, sometimes called “mdot” pages because they often have the same URL as the desktop page preceded by “m.”ĭuring this time, designer Luke Wroblewski ( proposed a somewhat different approach, that he called Mobile First. Before the iPad came out in 2010, the working assumption was that web pages needed to accomodate only two screen sizes - Desktop/Laptop and iPhone/smartphone sized. The difference, as you noted, is that the retina display has 2x pixel density, which you can target with media queries. The answer is that you can't - both the retina display iphone and the non-retina display report themselves to the browser as 320x240.
#Responsive design examples ipad iphone how to#
That said, if I'm reading your question right, you're asking how to target a retina display iphone using media queries for width. Portrait is vertical, landscape is horizontal. Strange thing is: the new Ipad 3, with pixel density 2, DOES correctly render the way I want, i.e: it mimics (at least as css media queries are concerned) a device with half the resolution.įirst: I think there's a typo in your question - on a 640x960 display, 640 wide is portait mode, not landscape. Of course, I could define separate media-queries for iphone 4 and the like with min-device-pixel-ratio: 2 but this leads to separate css media queries (one for low and one for high pixel density) which essentially have the same logic, which doesn't seem very DRY to me( ) Rationale: even though the iphone has more pixels, I do want to display a simplified layout to those user, similar to users of non high-density phones.Īny way to do this, by specifying some meta-tag for these high-pixel density phones for example? Want I want is the iPhone4 (640 x 960) when in portrait mode (640 wide) to adhere to media queries as if it's display-width = 320 pixels instead. I've designed a responsive site, with css media queries going all the way down to correctly display on 320 wide.
This must have been answered before, but I can't find a related question.
0 kommentar(er)
