search

MattWilcox / Adaptive-Images

Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed.
http://adaptive-images.com/
1.76k stars 229 forks source link

Not getting cookie value for user screen size? #182

Open clemsontiger opened 9 years ago

clemsontiger commented 9 years ago

Can't seem to get this to work.

If I force the resolution it seems to work, but if I don't, it doesn't.

Works when I do: document.cookie='resolution=480'; path=/';

Does not work, when I do: document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';

I've got the line before any other javascript. htaccess and adaptive-images is working due to it correctly resizing and stored in ai-cache when forcing the resolution..So I can only guess that the other snippet is not actually getting the resolution correctly? Like it's not correctly doing number 5 in the details instructions: "The PHP file looks for a cookie and finds that the user has a maximum screen size of 480px." How can I test what resolution it's picking up? What "cookie" is this referring to as its source for resolution?

faebe commented 9 years ago

Same problem here

faebe commented 9 years ago

Resolution:

screen.width outputs you the actual SCREEN width, not the VIEWPORT width. You can use window.innerWidth to get the current browser frame.

Code

Example with Retina support:

document.cookie='resolution='+Math.max(window.innerWidth,window.innerHeight)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';

EDIT (15.06.15)

I just found out window.innerWidth causes problems with high DPI devices (the value doubles). Looks like you are stuck with screen.width