Set your website to a specific width, scale or stylesheet based on viewport or dimensions
Adding this to the header of your page will set the website to the width of the mobile browser viewport. This will prevent the scaling and zooming you would see otherwise.
In addition, you can also use the viewport setting to indicate an exact width to kick in and create a custom range for scaling on the mobile browser.
Specifiy CSS Styles for iPhone/mobile Only
We can also use a code in the header to call up a specific stylesheet for mobile based on the dimensions only, instead of targeting a specific device.
If your mobile website uses the same HTML as your normal website, this is another way to add specific styles for specific screen dimensions (i.e. mobile and/or tablet).
Special Anchor Link Types
These are some great quick links you can add to an element to let the user initiate a call or send a text to a specfied number upon clicking it.
Hide the URL bar when your site loads on the iPhone
A lot of people find this is a simple, useful way to save a little screen real estate on the iPhone and get more of your site above the fold by hiding the URL bar. There are more complicated ways to implement it, so I've listed a couple ways I've seen it done so you can test them out.
Add an iPhone touch icon to your site
When bookmarking a website to your iPhone, it will automatically take a screenshot. With this you can specify if you would like an icon/logo instead. The image should be 57px by 57px in .png format. You do not need to add any corners or effects because the iPhone will do that for you.
Rounded Corners Using CSS3
You can create rounded corners for your content boxes/areas using the webkit CSS3 rounded corners extension. This is a great way to avoid using background images or dealing with cross-browser compatibility issues. I've provided all the parameters that should give you good cross-browser support (save for IE):
If you have any tips, feedback or code that you’d like to share, please feel free to add it to the comments section below!
Jesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communcations and has over 3 years of experience in web development and design.