My Blog, Now iPhone Friendly
Just a few days ago I was talking to Keefe about the iPhone version of his blog and how I’m not worried about mine because of 2 reasons:
- I don’t have many readers
- I don’t know many people who uses the iPhone
Not long after our discussion, I started noticing more and more of my friends using the iPhone, mainly through Facebook, so the latter wasn’t so true anymore, and I decided to make my blog iPhone friendly as well.
My first attempt at searching online always ended up with results with “Just install <some name> plugin and you’re good to go”, which I hated. I don’t know why, but it has always been my personal preference to have it written right into the core of my theme rather than rely on a plugin. Frustrated, I quit my web browser and watched a movie instead.
During my second attempt, I found what I was looking for. No plugins, just altering my CSS file. All I had to do was to add following @media selector in my CSS file and target any elements within the curly brackets.
@media only screen and (max-device-width: 480px) {}
We declare max-device-width: 480px because of the iPhone’s unique screen size. To style for average mobile devices, using the following selector should be sufficient.
@media handheld{}
These methods are a nice way of enabling web developers and designers to style their websites to be mobile friendly. But occasionally, there’s bound to be some elements that just can’t be styled the way you want them to because of the original code itself being placed so ever obscurely. The way I countered this was by using a mobile detection script and adding an if/else statement in my PHP file. That way, I can rearrange all my codes for the mobile version of my site without having to temper with the original ones.
After hours of typing and clicking on the refresh button, I’m not-so-proud to unveil the iPhone version of my site.
Main Page
Navigation Links
Landscape View