iPhone / Mobile Development Tricks

A few tips and tricks I’ve picked up along the way while designing the mobile theme for Wand’rly Magazine, an online publication for full time traveling types.

Prevent Horizontal Scrolling

Want to keep your site from scrolling left and right? This is a popular way to go about mobile designs and is relatively simple.


<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />

That will tell iPhones, and presumably Android phones as well, to attempt to prevent the user from being able to scroll left and right. But if your content, such as images or styles applied to other elements, is wider than the screen’s width, you’ll still end up with scrolling. To prevent this, just use the following CSS.


body {overflow:hidden;}

Note that anything that would naturally fall outside of the normal margins of the body tag will not be displayed.

Scale All Images Down to the Width of the Screen

Firstly, you should probably use some type of technique that serves up appropriately sized images, so that you’re not sending 900px wide images to a device that only has a maximum width of 480px. There are plenty of ways to do this, but in reality we’re sometimes working with sites where that’s not possible. If you want to make sure your images are never larger than the screen itself, just add this CSS to your site (this is specifically catered to iPhone and assuming 15px padding on each side of your layout, adjust as needed for your particular site).


body img {max-width:290px !important; height:auto;}
@media all and (min-width:480px) {
body img {max-width:450px !important; height:auto;}
}

The first body img call there is for portrait mode on iPhone, then we do a media query to see if the phone is instead in landscape mode, and adjust accordingly.

WordPress is_iphone and is_ipad Conditional Statements

I find these functions very useful. They don’t work right out of the box with WordPress, but you can add the following code to your functions.php file and have two additionally useful conditional statements for your WordPress themes.


function is_ipad() {
$is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($is_ipad)
return true;
else return false;
}
function is_iphone() {
$cn_is_iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
if ($cn_is_iphone)
return true;
else return false;
}

Serve Up Different Images for iPhone and iPad Retina Displays

Ironically, retina display on iOS devices that support it (iPhone 4+, iPad 3+), actually will make images look worse in many cases, because they’re essentially trying to double the images’ size. We can correct that for background images pretty easily. Just use the following media query:


@media all and (-webkit-min-device-pixel-ratio: 2) {
YOUR CSS HERE.
}

What you’ll be doing there is adding in different CSS (ie, a different background image or use background-size to 1/2 the size of the image used in the background.

Up Next: Uploading Documents to WordPress