force webpage to open in 100% zoom (in IE8)

Question

I have a website which works well with any zoom on FireFox/Chrome/Opera/Safari... but on Internet Explorer the site looks good only with 100% zoom. in IE7 the default zoom is 100%, but in IE8 the default zoom is 125%, so if you are using IE8 you need to press ctrl+0. I have used PIE.htc from http://www.css3pie.com for support CSS3 on IE.

Is there any JavaScript code or meta tag that controls the view size? I'll use it for IE only, of course.

Solution 1

http://msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx

"Windows Internet Explorer 8. The -ms-zoom attribute is an extension to CSS, and can be used as a synonym for zoom in IE8 mode."

Having said that, I haven't tried it to know how it behaves, and you shouldn't force a particular size on a user (as @Brad stated).

All modern browsers do a nice job of scaling things smoothly both up and down, so I wouldn't worry about it too much.

EDIT: your site looks fine in Chrome and IE8 on my machine (in which it opens at 100% on my machine anyway, so check your browser settings. This whole discussion may be moot).

Solution 2

No, this isn't possible. User preferences are up to the user, and even if you could find a way around it, you shouldn't.

It is up to the user to decide how they want their pages zoomed, not you. Keep in mind, this is often due to folks that can't see well (or can barely see at all), and they're much more interested in being able to read a page than how good your scaled graphics look.

Solution 3

1. It works on Chrome

   <script>
       document.firstElementChild.style.zoom = "reset";
   </script>
   

2. With this I prevent the user to zoom in on the page

   <script>
       $(document).ready(function () {
           $(document).keydown(function (event) {
               if (event.ctrlKey == true && (event.which == '107' || event.which == '109' || event.which == '187' || event.which == '189')) {
                   event.preventDefault();
               }
           });
   
           $(window).bind('mousewheel DOMMouseScroll', function (event) {
               if (event.ctrlKey == true) {
                   event.preventDefault();
               }
           });
       })
   </script>