In most of websites, while I change the zoom level of browsers, the font size will also increase and help user to see them. For some reasons, that just won't work on my new website. While I change the zoom level of the browser, everything changes but all font size keep the same. Is there a css or html property that I can use to control this behavior? Thanks
here is an example: http://ca.skywatcher.com/index.php
Increase or decrease the font size by clicking the + (plus) or - (minus) in the Zoom section of the menu (near the top). The browser's default zoom setting is 100%.
By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification. If you are using a mouse, you can hold down the keyboard Ctrl key and use the mouse wheel to zoom in or out.
The problem is that you have set -webkit-text-size-adjust: none;
for the body in layout.css
. Changing it to -webkit-text-size-adjust: auto;
allows the zooming of the fonts along with the page.
Edit: Corrected the CSS. Should be auto
not 0
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With