1

I am building a webpage where I don't use pixels in width and height. I use only percentages in order that page elements fit with any device (have the same percentage in page whatever device is used).

One of the results of such approach is that the zoom of browser doesn't affect the size of my divs (what I like very much).

The problem is that texts don't respect this rule. I tried to use CSS properties like line-height, font-size with percentage 100%, but in vain. What I need is a cross-browser solution to prevent the text from being zoomed in/out and keep its height always fit the parent div.

I hope I could explain myself correctly. Your help is appreciated.

Edit: One of the home works I have done before asking is the use of the following propoerties, but they don't work (chrome):

 -webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
-moz-text-size-adjust:none;
text-size-adjust:none;
Adib Aroui
  • 4,981
  • 5
  • 42
  • 94

1 Answers1

1

There's a CSS property you can use for this, though it only works for Mobile Browsers and it's non-standard so it needs every respective prefix for browsers that support it.:

-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;

Also refer to this page: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

For desktop browsers there isn't a simple solution since this is not really recommended. Though what you could do is try to figure out a way to detect if the user zooms the actual page using Javascript or JQuery and change text font accordingly.

Edit Ok so I searched around a bit and I found something that might help you, not too sure though. Apparently you can bind an event handler "onresize" on Javascript or JQuery's .resize() to check if user zoomed the page. Example:

var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
    var zoomNew = document.documentElement.clientWidth / window.innerWidth;
    if (zoom != zoomNew) {
        // zoom has changed
        // adjust your font
    }
});

Let me know if this works. Took the code from this answer to another question here https://stackoverflow.com/a/6168235/2854344

Community
  • 1
  • 1
Joao
  • 321
  • 2
  • 6
  • Yes this is what I mentionned in my edit. However I would like to thank you for the additionnal info. +1 – Adib Aroui Feb 26 '14 at 15:55
  • 2
    Indeed, I was about to mention the same. I guess you will have to track the page zoom and respectively adjust the font-size according to it. You can check this out: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers/5078596#5078596 – George Feb 26 '14 at 15:58
  • 1
    Yes I noticed your edit right as I posted the comment! I just edited my answer though, check it out. – Joao Feb 26 '14 at 15:58
  • Thank you for your time. I will come back give a feedback after implementing the whole suggestions. – Adib Aroui Feb 26 '14 at 15:59
  • @George. Interesting link. Thanks – Adib Aroui Feb 26 '14 at 16:01