Mobile Site

MuGeN

MuGeN

MuGeN

Associate
Joined
21 Oct 2008
Posts
1,679
Location
Mooching... in your house
Hi guys,

having a first crack at a mobile site and have a quick question...

so the iPhone (and other high res devices) takes images and doubles their size right? well, if a site (as ours is) is designed purely for mobile, at a width of 640... why do the images look twice as big as they should and blurred?

if it would only display it how we designed it'd look spot on, and I know its to do with detecting the screen size etc so could someone shed any light? basically I'd like to be able to output a high res version if the screen supports (at a proper 1:1 ratio) and a half size one on older devices...

Any ideas?

EDIT: there are plenty of solutions to do with background images, but I'm talking about foreground ones in img tags...
 
Last edited:
There seem to be two methods you need... One for background images which involves CSS media queries, and one fore foreground images which requires you to upload the high res image but set the size in HTML to half the size.

Although this works it is horribly hacky and non-semantic... Surely there is a more professional way? As this stands if another image was added by a lay person, someone would then have to go in and calculate the half sizes to stop the images being double size and blurry?

So... What is the proper way to create a mobile only site that works on both high res and low res devices?
 
Responsive design is all well and good, and where we will be moving... but this job is a specific mobile only site as that's what was specified in the job brief...

gonna tag on a question in case anyone knows...

This:

Code: 
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    body#page-home #container { background-size: 100%; }

works for iPhone 4, but on our HTC Sensation it is still zoomed to 2x and looks pixelated and crap...

Any idea how to mod this line (or add another one) for Android compatibility?
 
You must log in or register to reply here.
Back
Top Bottom