Help needed fixing Microsoft IE Bug

Discussion in 'JavaScript' started by allstar, Dec 18, 2006.

  1. #1
    Hi,

    The other day whilst working for one of my clients I came across this interesting, yet quite distressing problem.

    I had never encountered this before, but I think it may well become quite an issue for web developers over the coming months.

    It seems that some PC manufacturers, (most notably those who make hi-res PC screens) are now using a switch in the registry to make Internet Explorer scale-up images on hi-dpi screens.

    To give you a bit of background, most PC resolutions are set to 96 DPI. Which is great, we are all used to it, looks superb etc etc. However, some of these new hi-res monitors have so many pixels that manufacturers are increasing the DPI to 120 to help people read the text on their screens.

    Now this is all great, but it seems Microsoft have also implemented a new feature into Internet Explorer whereby IE can now scale up images and text to compensate for the higher DPI. This plays havoc with your nicely laid out and well designed website as all the images will appear pixelleted and potentially misaligned.

    To cut a long story short, this happened to me!

    For more info, please refer to the following website (they have screen grabs)

    http://www.lealea.net/blog/comments/web-dev-problem-win-ie-on-widescreen/

    Anyway, I'm now trying to fix this using Javascript (a programming language I really don't know) and I could do with some help.

    So far, I've managed to write this:

    function ScaleSize()
    {
    	//Scale images
    	var objects  = document.getElementsByTagName("img");
    	for(var no=0; no<objects.length; no++)
    	{
    		var imgH = objects[no].clientHeight;
    		var imgW = objects[no].clientWidth;
    		
    		var newH = imgH * 0.8;
    		var newW = imgW * 0.8;
    		objects[no].style.width = newW;
    		objects[no].style.height = newH;
    	}
    }
    
    
    Code (markup):
    Which you'll be please to know actually works quite nicely.

    The 0.8 is because IE actually scales images and divs to 1.25. So to scale my images back down to the correct size I'm multiplying the existing image size by 0.8 to scale it back down to 1.

    However, whilst this actually works and is looking promising, I need to scale every element on screen from 1.25 back down to 1.

    Can anyone help? Otherwise I'm stuck writing out loads of for loops for each element on screen, and that ain't pretty.

    If you need some help figuring out what the hell I'm talking about, try this:

    Right click on your desktop and go to properties, settings, advanced and change your screen DPI to 120. Now you'll need to restart your PC.

    Now, once your back into Windows, open the registry and either edit or add the following registry key:

    HKEY_CURRENT_USER > Software > Microsoft > Internet Explorer > Main > UseHR= dword:00000001

    Then open Internet Explorer and start browsing the web - you'll see what I mean.

    It's pretty easy to change everything back, just set the registry key value to 0 and change your screen DPI back to 96, then restart your PC.

    Thanks
    Chris
     
    allstar, Dec 18, 2006 IP
  2. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #2
    Why not just have a high res version of your site ?

    Detect the users screen resolution and use it to redirect the browser to a page with the correct images, or if you're using php, execute some of that to set a session var and send headers.....

    If they have implemented a new features it's normally here to stay, so instead of trying to get around it maybe you should just come up with ideas that work with it....

    My 2 pennies.....
     
    krakjoe, Dec 18, 2006 IP
  3. mad4

    mad4 Peon

    Messages:
    6,986
    Likes Received:
    493
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Although I have not heard of this it seems a bit extreme to fix your site for people with widescreens.
     
    mad4, Dec 18, 2006 IP
  4. allstar

    allstar Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #4
    If this was a small site, I probably would just make a high-res version, but this is quite a large, and a very image intensive site.

    Take a look http://www.fabsinglefriends.com

    It seems like the easiest thing in this instance is to figure out the scaling factor and re-size the images back down accordingly.

    Besides, it's not just this site that is a problem, it's any site with images. All the images become pixellated.
     
    allstar, Dec 18, 2006 IP
  5. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #5
    If it were me, I'd replace img src="images/ tags with img src=<?=$img_dir ?>/ tags, then have a javascript detect resolution and store it in the session var (simple ajax usage), then switch $_SESSION['res'] to use the right directory....
     
    krakjoe, Dec 18, 2006 IP
  6. allstar

    allstar Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #6
    Hmmm, yeah thats not a bad solution. Only issues I can see are that several of the images are referenced via the stylesheet.

    i.e.
    #divid 
    {
    background-image:url('myimage.jpg');
    }
    
    Code (markup):
    Not so easy to get round the issue with these images.

    Also note that not only are the images being re-sized by IE, the divs and fonts are too.
     
    allstar, Dec 18, 2006 IP
  7. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #7
    ez, change style.css to style.css.php and use the session vars in there, it'll echo out the right directories still....you can also use if else or switch structures inside you css.php file to fix the div sizes and what not.....
     
    krakjoe, Dec 18, 2006 IP
  8. allstar

    allstar Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #8
    Well I might give that a try. But I'm still not conviced.

    Basically for the following reasons.

    This issue is overriding anything I put in my css files.

    So even if I do create a new css file. I will have to detect the high DPI screens, then I will have to (in the css) shrink the size of the divs by the correct amount for them to be scaled back up again.

    And then I will also need create a whole new set of smaller images at a higher dpi that also scale to 1.25% and still look great...

    Is it worth that effort for the number of users who have this particular setup? I don't know, but I reckon this will become a bigger issue as higer DPI PCs get shipped.

    A better option would be to use scalable vector graphics (SVG) but as I didn't create the artwork for the site this is beyond my control.

    As I'm basically pretty lazy, I want an easier option.

    Hence my looking towards Javascript as a possible saviour. In fact JavaScript is working (see my example above) but as I can't address all the elements in the document in one function using getElementByTagName() or getElementByID(). I can't scale everything proportionally.

    What I need is something like a function called getAllElements() or getElement(*).

    I should also add that if a nice simple to use Javascript fix could be written, it might save a lot of heartache for a lot of people further down the line.
     
    allstar, Dec 18, 2006 IP
  9. allstar

    allstar Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
  10. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #10
    I'm fresh outa ideas man, sorry ..... :(
     
    krakjoe, Dec 18, 2006 IP
  11. allstar

    allstar Member

    Messages:
    38
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #11
    Hey no worries, thanks for helping.
     
    allstar, Dec 19, 2006 IP