We all know it’s good form to test our development web sites across browsers, but do we all also check across multiple devices such as the iPhone? At Slick Media we try and do just that and we’ll be looking into a few tricks to solve common questions:-
Stop text resize on iphone(that makes our web text different sizes even though we’ve set it in our CSS)
Thats a really easy one. Simply add the following line in your CSS body tag:-
}
body{
-webkit-text-size-adjust:none /* Fizes iPhone text sizing issues */;
}
Use different CSS to target iPhone (no php)
There’s a few different ways to do this and I prefer the second as it keeps everything seperate: -
1. CSS to your main CSS document
Simply tag the following code to the bottom of your main style sheet:-
/*--- Main CSS here ---*/
body {
background-color: #282828;
font-size: 12px;
color: #4f4d3e;
}
/*------------------------------------*\
iPhone CSS Begin
\*------------------------------------*/
@media screen and (max-device-width: 480px){
/*--- iPhone only CSS here ---*/
}
2. Serve up a new style sheet just for iPhone (or other mobile device)
Tell the browser that we are using a mobile device and load up a new style sheet by adding the following to your pages <head></head> tag:-
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css" />
<!--<![endif]-->
Or if you only want to add a bit of code you could just drop in the CSS like so:-
<!--[if !IE]>-->
<style type="text/css">
@media only screen and (max-device-width: 480px) {
.... CUSTOM CSS HERE....
}
</style>
<!--<![endif]-->
