Question

What I’m trying to achieve is this:

Let the whole page scale down except for navigation container. I am overriding some of its CSS rules to make it more accessible on smartphones, but the problem is that it uses quite a few images and I need to display those in their original size (1 image px = 1 device screen px).

Is there any technique to achieve this?

Answer 1

I don’t have the context so it’s harder, but maybe you can achieve it with JavaScript and CSS, this way:

1) Detect the device-width, and compare it to the document width

To retrieve the document width, you can use this snippet i found somewhere:

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];
var width = w.innerWidth||e.clientWidth||g.clientWidth;

Then get the ratio by dividing it to screen.width:

var ratio = width / screen.width;

---

So, let’s say the device-width is 320px (iPhone potrait) and the page with is 980px (usual iPhone render).

980 / 320 = 3.0625.

---

2) Zoom / scale your content to that ratio

You can do it with CSS transforms

-ms-transform: scale(3.0625);
-webkit-transform: scale(3.0625);
-o-transform: scale(3.0625);
-moz-transform: scale(3.0625);
transform: scale(3.0625);

or with CSS zoom for modern browsers and IE:

zoom:3.0625;

or with jQuery UI Effects, or with jQuery Transit, or with HTML5 canvas scale (if your target is a canvas), or with pure JavaScript:

document.getElementById("idOfTheContent").style.width = document.getElementById("idOfTheContent").style.width * 3.0625;
document.getElementById("idOfTheContent").style.height = document.getElementById("idOfTheContent").style.height * 3.0625;

or with….any scaling/zooming method you can find around.

In any case i’m not sure about the precision of the scale (how many digits after the comma are actually processed, but i think even rounding it to an integer will be ok) and how it will render.

Let me know if it works out 🙂