Try our conversational search powered by Generative AI!

Mari Jørgensen
Apr 5, 2010
(7 votes)

IPhone Optimization Made Easy

The is no doubt that with the introduction of IPhone and IPod Touch, mobile browsing has increased dramatically:  surveys confirm that iPhone users are hard-core internet junkies. At the same time about 40% of iPhone users say the iPhone has trouble
displaying some websites they want to visit.

So what is the best way of making your EPiServer website iPhone-friendly?

Well, there are several approaches:

  1. Use one of the external solutions available, some of them are listed on the epimore site.
  2. Create separate IPhone-specific templates

I will introduce a third option:
Building IPhone-friendly websites using HTML, conditional CSS and jquery

In this example, I’m using the new demo website for EPiServer CMS 6, “Alloy Technologies”. If you haven’t seen it yet, have a look at

Preparing the IPhone-specific stylesheet

By default, stylesheets apply to all media types. CSS3 recognizes several media types, including print, handheld, and screen. iPhone OS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone OS.

To specify a style sheet that is just for iPhone OS without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iPhone OS style sheet. Use device-width, max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone and iPod touch, use an expression similar to the following:

<link media="only screen and (max-width: 480px)" 
rel="stylesheet" type="text/css"
href="~/Templates/Demo/Styles/Default/iphone.css" />

To specify a style sheet for devices other than iPhone OS, use an expression similar to the following:

<link media="screen and (min-width: 481px)" 
rel="stylesheet" type="text/css"
href="~/Templates/Demo/Styles/Default/Styles.css" />

Controlling the Page Scaling

Unless you tell it otherwise, Safari on the iPhone is going to assume that your page is 980px wide. We want to format our content specifically for the smaller dimensions of the iPhone, so we must let Mobile Safari know about it by adding a viewport meta tag to the Header.ascx file:

<meta name="viewport" 
content="user-scalable=no, width=device-width" />

If you don’t set the viewport width, the page will be zoomed way out when it first loads. The viewport meta tag will be ignored by browsers other than Mobile Safari, so you can include it without worrying about the desktop version of your site.

Adding IPhone CSS rules and behavior using jQuery

When adding css rules to the iPhone.css stylesheet, I used the concepts described in this article:

In short I did the following:

  1. Removed flash area on front page by using display:none
  2. Added a main image to display on the front page (hidden by default in styles.css)
  3. Main menu and sub menu are hidden by default, but accessible by a custom menu button in the top of the page.
  4. In addition, I decided to hide the quicksearch field, and instead add the Search page to the main menu. 

In order to get hold of the search page url from javascript I added a http handler, SearchPageUrlHandler.ashx (see function AddSearchPageToMainMenu in javascript below). The code inside the handler is as simple as this:

public void ProcessRequest(HttpContext context)
   PageData searchPage = null;
   string searchUrl = "";

   PageData startPage = 
GetPage(PageReference.StartPage); if (startPage != null) { PageReference searchPageRef =
startPage["SearchPage"] as PageReference; if (
!PageReference.IsNullOrEmpty(searchPageRef)) searchPage =
GetPage(searchPageRef); } if(searchPage != null) searchUrl =
string.Format("<a href=\"{0}\">{1}</a>",
searchPage.LinkURL, searchPage.PageName); context.Response.ContentType = "text/plain"; context.Response.Write(searchUrl); }

Here is my iphone.js file (please read oreilly-link above to learn about the details):

if (window.innerWidth && window.innerWidth <= 480) {
    $(document).ready(function() {
        $('#MainMenu ul').addClass('hide');
'<div class="leftButton"
); $('#Functions ul').addClass('hide'); $('.SubMenuArea ul').addClass('hide'); }); function toggleMenu() { $('#MainMenu ul').toggleClass('hide'); $('#Functions ul').toggleClass('hide'); $('.SubMenuArea ul').toggleClass('hide'); } function AddSearchPageToMainMenu() { var searchLink; $.ajax({ type: "GET", url:
'/SearchPageUrlHandler/SearchPageUrlHandler.ashx', data: "{}", async: false, contentType: "text/plain; charset=utf-8", dataType: "html", success: function(result) { searchLink = result; } }); if (searchLink) { $('#MainMenu ul').append('<li>' +
searchLink + '</li>'); } } }

The result

Here are some screenshots taken from my iPhone:

StartPage Menu Menu_complete BlogPage Search Login


Want to try it (or have a closer look)?

Download the .epimodule file below and install using the “Install a Module from a compressed File” option inside the EPiServer Deployment Center.

Prerequisites for module installation

  1. EPiServer CMS 6 Release (v 6.0.530.0)
  2. Public templates installed
  3. Demo templates installed


Safari web content guide

Apr 05, 2010


Sep 21, 2010 10:33 AM

Excellent post and great timing with more requests for mobile support coming in. Thanks Mari!

Sep 21, 2010 10:33 AM

Cool, looks very nice

Sep 21, 2010 10:33 AM

Looks great, thanks alot

egilagre Sep 21, 2010 10:33 AM

What happens when Apple approves Opera and Firefox as an alternative browser to IPhone?
I would think you have to check the Request.Browser.IsMobileDevice to see if the client is in fact a mobile, and then check for: Request.Browser.MobileDeviceManufacturer.

I dont know if IPhone actually sends this kind of information, but i sure hope they do :)

Mari Jørgensen
Mari Jørgensen Sep 21, 2010 10:33 AM

This approach uses the browser width to decide which stylesheet to load, so I don't think Firefox and Opera will be a problem. I've used Firefox and Chrome when developing.

egilagre Sep 21, 2010 10:33 AM

If someone want to create a specific design for IPhone users, they can't use this method; because any device that has a width of 480px will get this style?

Dont want to be a troublemaker over semantics, but the devil is in the details :p
The method presented is not IPhone specific, but any devices with a width of 480px, if im not mistaken :)

Very good article and love that you have included pictures for illustrations :) :) :)

Sep 21, 2010 10:33 AM

This is really Nice blog
/ Abhishek

Oct 21, 2010 03:48 PM

This is great! Thanks for this! Jul 12, 2011 07:41 AM

I am using Windows 7 OS.....and i am new to mobile app.....i am trying to test the mobile app functionality,but i didnt hav iphone.....any other alternative? pls suggest........ Jul 12, 2011 01:56 PM

HI Mari,

Where is your iphone.css file? Jul 13, 2011 06:57 AM


I already have a site developed in episerver cms 6.If i went to source file of one of the pages and change the tag and tag as described above......then can i view that page in mobile? Jul 14, 2011 07:27 AM


While i am import date the below error occured......

Exception: Specified part does not exist in the package.[]

Can anyone figure it out?

Please login to comment.
Latest blogs
Optimizely Web... 6 Game Changing Features in 2024

If you are interested in learning about what's new within Optimizely Web, you are in the right place. Carry on reading to learn about the 6 greates...

Jon Jones | Mar 3, 2024 | Syndicated blog

Headless forms reloaded (beta)

Forms is used on the vast majority of CMS installations. But using Forms in a headless setup is a bit of pain since the rendering pipeline is based...

MartinOttosen | Mar 1, 2024

Uploading blobs to Optimizely DXP via PowerShell

We had a client moving from an On-Prem v11 Optimizely instance to DXP v12 and we had a lot of blobs (over 40 GB) needing uploading to DXP as a part...

Nick Hamlin | Mar 1, 2024 | Syndicated blog

DbLocalizationProvider v8.0 Released

I’m pleased to announce that Localization Provider v8.0 is finally out.

valdis | Feb 28, 2024 | Syndicated blog

Epinova DXP deployment extension – With Octopus deploy

Example how you can use Epinova DXP deployment extension in Octopus deployment.

Ove Lartelius | Feb 28, 2024 | Syndicated blog

Identify Azure web app instance id's for an Optimizely CMS site

When running Optimizely CMS in Azure, you will be using an instance bound cloud license. What instances are counted, and how can you check them? Le...

Tomas Hensrud Gulla | Feb 27, 2024 | Syndicated blog