Hey guys,

 

I'm using the css3 option of text scaling based on viewport size.

I ran into the problem of Safari and IE (*&%@# browser) not supporting viewport units.

I checked on http://caniuse.com/viewport-units the compatability, it should support it fine,

but If I preview it on the ipad here the text doesn't scale. which happened to be a safari problem, since if I test it on the pc or mac on safari, it doesn't scale either.

 

i'm 100% sure of using the latest update for the ipad.

Does anyone know of a solution for this? another method I should try. I've tried looking for a webkit variant, but I can't find it.

or perhaps another solution? I may well just stick to downscaling the text on the ipad with em. but maybe someone had another good solution.

Hey.

Two alternative solutions comes to mind:

1. Having Mediaqueries with fontsize in your css. You will ofcause not have a complete relative scaling but you could set up queries for typical resolutions.

2. Having a Javascript function that grabs the innerWidth, innerHeight of the window object and assigns fontSize properties based on that. You would then call that function onload and onresize

In Safari viewport units are only supported in the latest version of Safari 6.0 which runs on Mac OS X v10.7 and OS X v10.8. Or on IOS devices iPhone 5, iPad (4th generation) and iPad Mini.

 

I like both ideas suggeested by Nillervision.

 

Another alternative for scaling the headings only is to use Fittext http://fittextjs.com/

picked this back up today. I basically detect first if the vw untis are supported by the browser, if they are not, then i substitute my own viewport formula for the units

 

 
$(document).ready(function() {
    var getVW = $("#vw-test");
 
var viewport = $(window);
 
var newFont = window.innerWidth / 100 +"px" ;
 
getVW.css({
  width: "100vw"
});
 
if (getVW.width() != viewport.width()) {
document.body.style.fontSize=newFont;
}
 
 
});