iOS Support

The iPhone support in our responsive themes is "hard-wired" directly into the core template file. This is because several different pieces in separate files are required to make a RW theme "responsive".

To remove iPhone support you will need to manually edit the core template files. Here's how to do so (make sure to backup your theme and project file first):

  1. Right-click on the theme from within RW and select "Reveal Theme Contents in Finder"
  2. In the new Finder window that opens look for and open the index.html file in a good text editor (the free TextWrangler from Bare Bones Software is a good option if you don't have one. If you don't see the code mentioned below, that means the file has been opened as a webpage, and not as a text file).
  3. The first portion you'll want to change is on line 5 (or near there) and looks like this:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    Comment out or remove that line.

  4. The second portion you'll need to change is the link to the iPhone stylesheet, which will be on or around line 18, and look like this:

    <link rel="stylesheet" type="text/css" media="all" href="%pathto(css/iPhone.css)%" />

    As in Step 3, comment out or remove that line.

  5. Save and close the file, and republish your site.

    Please note, by removing the line in Step 3 above iPad/Responsive support will not work as expected in these themes. Please proceed with caution, and only perform these changes if you are fully aware of the consequences.

To remove the iPhone version of Phelix v1.0/Mirage v1.7/Glide/Unity, three changes will need to be made - adding a different DOCTYPE to the template index.html file, editing a link tag to the styles.css stylesheet, and the removal of the iPhone.css link tags. As always, I recommend making a backup of your work before getting started.

  1. From RW's Theme Drawer right click on Mirage/Glide/Unity and select "Reveal Theme Contents in Finder". In the next Finder window there should be an index.html file, go ahead and open it in a good text editor (the free TextWrangler from Bare Bones Software is a good choice).

    Right at the top you'll see this DOCTYPE:

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

    This is a mobile specific one that tells the iPhone to display at native resolution. There are several different "desktop" DOCTYPEs to choose from, but I recommend replacing it with the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  2. Next, around line 8 of the index.html file you'll see this line (you can skip this step if you're using Glide v1.7+, Mirage v1.7, Phelix v1.0+, or Unity 2.0):

    <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="../../rw_common/themes/nimblehostv4/styles.css" />

    Change the media type to just "screen".

  3. Now look several lines down (around line 17, depending on the theme) for this link tag:

    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="%pathto(iPhone.css)%" />

    Either comment it out (the tags), or delete it.

    <!-- < link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="%pathto(iPhone.css)%" /> -->

  4. In order to prevent the sidebar from being hidden on the iPhone, you may also need to comment out or delete the following line from the block of javascript starting around line 33 (to comment out the line, add the two forward slashes highlighted in red below - this "hides" the line from browsers):

    //$fz("#zoomSidebar").fancyZoom();

  5. If you're using Phelix v1.0+, Mirage v1.7, or Glide v2.0+ then you'll also need to comment out or delete a line that automatically resizes images for the iPhone. This line should be located directly below the one above, and looks like this:

    //mobileImageResize();

  6. If you're using Glide v2.3, you may also need to remove a special meta tag designed for the iPhone/iPad. To do this follow Step 2 in the question below about removing iPhone support from Qube.

    That's it! Save and close the file, re-upload your site, and you're all set.

*PLEASE NOTE: Qube v1.4 does not require these steps. For Qube v1.4 just uncheck the "Include iPhone Support" option in the Advanced Site Options section. Nothing else needs to be done.

To completely remove the iPhone version for these themes, a few things need to be done:

  1. Uncheck the box next to "Include iPhone Support" in theme options (located under the Styles tab in the Page Inspector).
  2. Remove a meta tag in the template index.html file. Here is how to do so (be sure to backup your theme and data first):

    • Right-click on the theme from within RapidWeaver® and select "Reveal Theme Contents in Finder..."
    • In the Finder window that displays, open the index.html file in a good text editor (the free TextWrangler from Bare Bones Software is a good choice).
    • Remove the meta tag on line 5 or line 6, which looks like this:

    <meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

  3. Change the DOCTYPE of the template index.html file. By default, the DOCTYPE is this:

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

    Change it so the new DOCTYPE is this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  4. Finally, to prevent the iPhone from resizing images and performing other iPhone-specific functions, you'll need to "comment out" some code. This will "hide" that code so that the iPhone won't see it.

    For Qube v1.0 - On lines 25-27 of the template index.html file, add two forward slashes (//) like this:

    //iPhoneMenu();

    //mobileImageResize();

    //$fz(".zoom").fancyZoom({width: 250});

    For Phelix v1.7 - On lines 29-32 of the template index.html file, add two forward slashes(//) like this:

    //$fz("a.zoom").fancyZoom({width:250});

    //mobileMenu();

    //mobileSidebar();

    //mobileImageResize();

  5. Save and close the file, then re-publish your site. This will remove the mobile version, so that iPhone visitors to your website see the full desktop version.

If you are experiencing this problem, follow the directions below to enable iPad visitors to access the menu items in your drop down navigation:

  1. Use the links below to download the code snippet for your theme.
  2. Locate the downloaded file on your computer. For example, if you downloaded the Gravity code snippet, the file will be named GravityiPadiOS6MenuFix.zip. Likewise, for Qube the file will be named QubeiPadiOS6MenuFix.zip, and similarly for other themes. Once you have located the file, double-click it to reveal the code snippet (.rwsnippet) file.
  3. Double-click on the .rwsnippet file that was revealed in Step 2 above, and RapidWeaver® will install the code snippet for you.
  4. Open your RapidWeaver® project file, and click on the "Configure" icon in the left sidebar under the "Stats" section.
  5. Open the RW Snippets browser (choose "Show Snippets" from the "View" menu).
  6. Locate the code snippet you installed in Step 3, then drag and drop it into the very beginning of the Google Analytics text field.
  7. Save your project, then use the Re-Publish All Files option from RapidWeaver®'s File menu.

*Please note, only themes with drop down navigation can be affected. Hence, Phelix and Unity are not listed here.

This can happen for a couple of reasons:

  1. You're using a domain name that is forwarded to your site, and "masking" the domain. Forwarding is okay, but masking a domain causes the iPhone version to display incorrectly.

  2. The output setting in RapidWeaver®'s Page Inspector is incorrect. Under the "General" tab is an option called "Output". This should be set to "Default". If it's set to "Optimized" RapidWeaver® will change the template page we've built for the theme which will cause this problem.