CODEWITHSUNDEEP
jqueryiphonefont-size
user1563944
user1563944

Reputation: 403

font-size using jQuery not working on iPhone

Briefly, what I'm trying to do is write a bit of jQuery that sets the font-size of three divs based on the width of the screen.

I've tested the code on Chrome, Safari and Firefox on a desktop and it's all working fine, scaling up and down nicely. It's working ok when tested on an iPad - both Chrome and Safari. But when I test it on an iPhone it all falls apart.

When the page is loaded on Safari the js doesn't seem to do anything and the font-size doesn't change. But bizarrely, when you rotate the iphone, the font does change size to the correct size it should have been when the page was first loded, even though I haven't written a .trigger function.

What's got me even more puzzled is that it seems to work when viewing the webpage using Chrome on the iPhone.

I can't understand why my code won't doesn't want to work on an iPhone specifically!

Here's my jQuery

//Gather the screen width and height
var screenwidth = $(window).width();
var screenheight = $(window).height();

// set the width and height of the box based on the screen width and height
var boxwidth = screenwidth - 80;
var boxheight = screenheight - 200;

$("#box").width(boxwidth);
$("#box").height(boxheight);

//center the box along the X and Y axis
var boxX = (screenwidth / 2) - (boxwidth / 2);
var boxY = (screenheight / 2) - (boxheight / 2);

$("#box").css({"margin-top" : boxY});
$("#box").css({"margin-left" : boxX});

//set the font size of each div based on the screen width
var box1font = Math.floor( (screenwidth / 100) * 8.8 );
var box2font = Math.floor( (screenwidth / 100) * 6 );
var box3font = Math.floor( (screenwidth / 100) * 1.6 );

$("#box1").css("font-size" , box1font);
$("#box2").css("font-size" , box2font);
$("#box3").css("font-size" , box3font);

//center the divs within the parent element
var inner = $("#wrapper").height();

var innerX = (boxheight / 2) - (inner / 2);

$("#wrapper").css({"padding-top" : innerX});

Upvotes: 2

Views: 568

Answers (1)

freejosh
freejosh

Reputation: 11383

Try adding the CSS property -webkit-text-size-adjust: none to your page.

Upvotes: 3

Related Questions