Top 9 Tips for Building a Website for the iPhone

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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

positive contribution tech

Technology’s Positive Contributions to Society

Technology has and continues to improve our lives. From the business world to the world of medicine, and our day-to-day lives, you can’t go a day without interacting with at least one form of technology. While some fear technology may be going too far, there are many ways in which

How to Choose From The Best Big Data Platforms in 2023

How to Choose From The Best Big Data Platforms in 2023

As big data continues to become increasingly popular in the business world, companies are always looking for better ways to process and analyze complex data. The process critically depends on the platform that manages and analyzes the data. In this article, we will provide a guide to help you choose

Why transparent code is a good idea

Why Transparent Code is a Good Idea

Code is used to make up the apps and software we use every day. From our favorite social media platforms to our online banking services, code is the framework used to build these tools that help make our lives easier. Code is complex. Software today requires large teams of programmers

The Role of WordPress Hosting in Website Speed and Performance

The Role of WordPress Hosting in Website Performance

The term “WordPress hosting” refers to a specific type of web hosting service that offers hardware and software configurations tailored to the needs of WP sites. It’s important to remember that a WP hosting package is not required to host WordPress webpages. WP web pages are also compatible with standard

Data Privacy vs. Data Security: What you Should Know

Data Privacy vs. Data Security: What you Should Know

Data privacy and data security are often used interchangeably, but they are two completely different things. It’s important to understand the difference for anyone who handles sensitive information, such as personal data or financial records. In this article, we’ll take a closer look at data privacy vs. data security. We’ll