@media not resizing fonts on iphone

Question

I have the following CSS snippet in my site...

The span class renders fine on brower / ipad but the @media does not alter the font size on the iphone.

Please can someone let me know what I am doing wrong...

span.message 
{display:table-column;
width:589px; min-height: 65px;
padding: 10px 10px 10px 10px;
float:right;
vertical-align: top;
border-top-width : 0;
background : white;
font : normal 70% sans-serif; vertical-align: top; color: #000000;
border-radius : 0em 1em 1em 0em;}

@media screen and (max-width:640px){
span.message {font-size:40%;}
}

Thanks to gaynorvader...

@media screen and (max-device-width: 480px){
   body{
   -webkit-text-size-adjust: none;
   }
}

The above @media solves the font-resize issue. (provided you type it correctly).

http://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone — gaynorvader, Jun 11 '13 at 10:51
Thanks gaynorvader - I saw that post and I am doing as it suggests, however i still seem to have the old font size... — TJS101, Jun 11 '13 at 10:52
gaynorvader is completely correct - I have made a mistake in editing. CSS appended above. — TJS101, Jun 11 '13 at 10:55
gaynorvader - can you add the link as an answer to I can accept and upvote. — TJS101, Jun 11 '13 at 10:58

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

You should see the answer in this link you are missing -webkit-text-size-adjust: none;

edited May 23 '17 at 12:13

Community

1
1

answered Jun 11 '13 at 11:00

gaynorvader

2,619
3
18
32

@media not resizing fonts on iphone

1 Answers1