5 Replies - 2536 Views - Last Post: 12 January 2014 - 08:46 AM

How to make my web page stay the same on IE regarding of zoom size

Posted 10 January 2014 - 07:44 PM

Hey guys so I have a problem that I'm kinda stumbling upon. So at work I have design a webpage with proper alignments and formatting that are client desires. The problem is that when the webpage is viewed on 125% zoom on IE(Internet Explorer) the webpage shows exactly how our clients want it. But when it is viewed on 100% zoom, the formatting and alignments changes and gets a bit distorted. I've been tasked to research and find out if there's a solution to make the formatting the same on IE regarding weather its viewed at 100%, 50%, 125% zoom level or not.

Any ideas on how I could approach this problem would be helpful. Our web page consists of JSP, Java, Struts technology, Java Scripts.

Replies To: How to make my web page stay the same on IE regarding of zoom size

Re: How to make my web page stay the same on IE regarding of zoom size

Posted 10 January 2014 - 09:12 PM

Hey.

This is a CSS issue. The server-side technologies (Java/JSP/Struts) have no bearing on this; it's the same whether the pages are static HTML, JSP, PHP, ASP, Python, etc...

You need to study the different CSS units available. There are relative (%,em) and absolute (px,pt) units, and which you choose will affect how the page renders on different screen sizes and zoom levels. If you want the page to render consistently, you need to understand where and how they should be used.

By the way, the four units I mentioned are not the only choices, just those that are most popular for typical websites targeting computer screens. There are different considerations when dealing with things like print layouts.

Re: How to make my web page stay the same on IE regarding of zoom size

Posted 11 January 2014 - 04:23 AM

I recommend that you read this article on Responsive Web Design. It is not specifically about zooming, but a lot of the same principles apply. In particular, if you create a flexible design, it is more likely to behave on zooming the page.

Specifically targeting zoom-behaviour is difficult in my opinion: there is no 'zoom' event. A better approach IMO is to create a flexible (responsive) site and test it frequently at different zoom levels.

BTW Getting a page to keep the same formatting at 50%-zoom will be, erm, challenging. Looking reasonable at 50% is a slightly more realistic aim.

Re: How to make my web page stay the same on IE regarding of zoom size

Posted 11 January 2014 - 11:10 AM

Atli, on 10 January 2014 - 11:12 PM, said:

Hey.

This is a CSS issue. The server-side technologies (Java/JSP/Struts) have no bearing on this; it's the same whether the pages are static HTML, JSP, PHP, ASP, Python, etc...

You need to study the different CSS units available. There are relative (%,em) and absolute (px,pt) units, and which you choose will affect how the page renders on different screen sizes and zoom levels. If you want the page to render consistently, you need to understand where and how they should be used.

By the way, the four units I mentioned are not the only choices, just those that are most popular for typical websites targeting computer screens. There are different considerations when dealing with things like print layouts.

Thanks i'll study the different css units and see if that'll help

andrewsw, on 11 January 2014 - 06:23 AM, said:

I recommend that you read this article on Responsive Web Design. It is not specifically about zooming, but a lot of the same principles apply. In particular, if you create a flexible design, it is more likely to behave on zooming the page.

Specifically targeting zoom-behaviour is difficult in my opinion: there is no 'zoom' event. A better approach IMO is to create a flexible (responsive) site and test it frequently at different zoom levels.

BTW Getting a page to keep the same formatting at 50%-zoom will be, erm, challenging. Looking reasonable at 50% is a slightly more realistic aim.

I kinda figured it would be difficult to do so. The webpage system is actually very big and its already been built and running for a few years now. all I'm doing is debugging when there are errors. Its a health and dentist adjudication system. The BA (Business analyst) came to me and asked me if I could look into it to see if it would be possible to keep the formatting and arrangement the same if the screen sizes were changed from 125% to 100% on IE. Thanks for your input. I'll check the link you suggested

Re: How to make my web page stay the same on IE regarding of zoom size

Posted 12 January 2014 - 07:40 AM

There is a missing piece in the post Dankwansere. How is the layout of the site was made in the first place. Is it something "hand-crafted" or what. In my opinion, you cannot repair or alter something you don't know how was made in the first place. If it is just a proprietary design , it is rather difficult to modify it, taking into account that one small change can trigger other problems and that something else in the future may cause bigger headaches. I think that in many cases is better to use some template system, library, framework or whatever you see fit - and there are a lot of them for free, so to get control over the design and not walking the way of intuition.