The iPhone has its own rules and standards related to web page rendering. To make things more complicated, mobile Safari is quite different from the desktop version. As a result, you may encounter many problems and bugs while optimizing a website for the iPhone. This article discusses the most common bugs and solutions to them, and provides some useful tips.
1. Set viewport
The Meta viewport tag is used to prevent auto-scaling and zooming your web page in and out, thus helping your website work properly on iPhone. Add the following code inside the document head tag:
2. Use proper media queries
Use the following media queries to target iPhone devices.
// iPhone [email protected] only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */}// iPhone [email protected] only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* STYLES GO HERE */}// iPhone 5 [email protected] only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) { /* STYLES GO HERE */}// iPhone 5 [email protected] only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation: landscape) { /* STYLES GO HERE */}// iPhone 2G-4S [email protected] only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait) { /* STYLES GO HERE */}// iPhone 2G-4S [email protected] only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape) { /* STYLES GO HERE */}// Retina dis[email protected] screen and (-webkit-device-pixel-ratio: 2) {/* STYLES GO HERE */}3. Remove the 300ms click delay
When clicking a link on iPhone, there is a small delay before the page starts loading. This can become very annoying over time. Fortunately, there is a solution – a JavaScript library that removes the delay. The library can be downloaded from here. It is implemented easily:
jQuery(document).ready(function($) { $(function() { FastClick.attach(document.body); });});4. Replace images for retina display
Retina displays can be targeted using a media query:
.portfolio_image { background: url("images/portfolio_image.jpg");}@media screen and (-webkit-device-pixel-ratio: 2) { . portfolio_image { background: url("images/[email protected]"); }}However, you would have to manually change each image’s background, which can take a lot of time. Here is a faster solution:
var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1; if (pixelRatio > 1) { $("img").each(function(idx, el){ el = $(el); if (el.attr("data-src2x")) { el.attr("data-src-orig", el.attr("src")); el.attr("src", el.attr("data-src2x")); } }); }Where your HTML would be:
5. Make animations look smooth
Sometimes it happens that CSS animations on iPhone don’t look smooth. The fix to this problem is to make the device enable hardware acceleration by using translate3d:
.slide { width: 100%; height: 100%; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}6. Position: fixed and virtual keyboard
In earlier iOS versions, position fixed was not supported. In newer versions, it is supported, and it works fine until the virtual keyboard is opened, when it changes its position. The only fix is to apply absolute position on input focus, and return to position fixed on input blur:
$(document) .on('focus', 'input,textarea', function(e) { $("#top_menu_wrap").css("position", "absolute"); }) .on('blur', 'input,textarea', function(e) { $('#top_menu_wrap').removeAttr('style'); } });7. Don’t use CSS hover state
In iPhone, the CSS hover styles are displayed on touch, and they stay there even if the user removes the finger, which is not quite user-friendly. The best solution is to remove the hover styles from your iPhone CSS.
8. Create iPhone icons
It is a good practice to create icons for iPhone, in case your users want to add your website to their home screen. The icons are added to the head section of the document:
The iPhone automatically rounds the corners of your icon. If you want to turn this off, use the following code instead:
9. Detect iPhone in PHP
The iPhone user-agent detection in PHP is a very useful feature – you could include an additional Style Sheet or JavaScript file, or make the mobile website lightweight by removing things that are not needed. This can be coded manually, but it is better and faster to use one of the existing libraries. You can download PHP mobile detect class from here or WordPress mobile detect plugin from here.
