Maintain text in browser with zoom

Question

I'm building up a website using fullpage.js. When zoomed 100%, the webpage looks great, yet, when zooming just 25% more, texts and imgs will start overlapping or even disappearing, as each section has very limited height (with no scrolling), making my webpage impossible to read. I'm using em unit for font sizes and percentages for sizes, imgs and margins (except if its too little margin (5px, for example), where I use px ). Hence, I was wondering if there's a solution using Javascript, CSS or HTML which can maintain font size even if the webpage is zoomed. As of now, I've tried, with no success, the following:

document.body.style.zoom="100%"

-webkit-text-size-adjust: none;

Using fullpage's feature resize, but it only works if the user resizes the window once the page has loaded.

document.body.style.webkitTransform = 'scale(1)' 

My website is (sorry, I don't know which part of it to post, as the issue involves all of it):

http://rienpipe.es

Thanks in advanced!

Answer 1

you can fix this by using @media query's and a viewport in your css , and add this meta tag to your html:

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

and with the @media query's and viewport you declare what size you have per screen width using this media query + viewport in css:

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }   

// your css for screens between 820 and 920 pixels in width goes here

  }

i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}

So this means you will have 6 times your css code which is adapted will be adapted to the size.

This is called adaptive or responsive design and is pretty easy to do

For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/