0

I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.

This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).

According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.

My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.

Is there any way I can make the text have the same relative size in both these browsers?

André Casal
  • 1,012
  • 1
  • 11
  • 25

3 Answers3

0

I found the answer in JavaScript:

onresize=onload=function(){
    document.body.style.fontSize=window.innerWidth/20+"px"
}

which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.

André Casal
  • 1,012
  • 1
  • 11
  • 25
0

Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:

onresize = onload = function(){
  document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
David
  • 623
  • 7
  • 16
0

You should try CSS Unit vw, like this:

body { font-size: 1.5vw; }

However, i am not sure it is supported by mobile browsers...

EDIT

Check for browser compatibility here.

Usagi Miyamoto
  • 6,196
  • 1
  • 19
  • 33