Mobile: Fix for Apple iPhone IOS 7

From IThemes Codex
Revision as of 12:00, February 12, 2014 by Josh (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Fix for iPhone IOS 7

Due to IOS 7 complications there has been changes made to iThemes Mobile to allow compatibility.

Mobileiphoneheaderupload.png


1.) If you have a custom header you will need to re-size the header and re-upload. Now there is a fancy setting on the mobile theme Style Manager page called "Upload header specifically for iPhone IOS 7." Just tick the checkbox like shown above and upload a header file with the recommended dimensions. This will then only show the file you uploaded when viewing your site with a Apple iPhone running IOS 7.

2.) Note: This is only if you have custom styles added to your mobile theme style.css. If you do not have the option on the settings page "Upgrade themes on automatic upgrade" checked, then you will have to copy some of the code from the header.php and functions.php to make your mobile theme IOS 7 compatible. If you need some help please post your question in the mobile support forum. http://ithemes.com/forum/forum/87-mobile/

2a.) Here is a sample theme that has the code included to support IOS7. File:Banner-Sample.zip For your mobile custom theme to support IOS 7 it needs code changes in functions.php and header.php for it to work properly. First copy the code down below or in Banner-Sample/function.php from line 54 to the end of the file and then paste the code you copied to the end of your functions.php. Now that you have the code in your functions.php we can add the code to your header.php.

function it_is_ios7( $ipad_enable ) {
	if ( true == $ipad_enable ) { 

		if ( false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPhone OS 7_' ) || false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPad; CPU OS 7_' ) || false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPod touch; CPU iPhone OS 7_' ) ) {
				return true;
		} else {
				return false;
		}

	} else {
		if ( false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPhone OS 7_' ) || false !== strpos( $_SERVER['HTTP_USER_AGENT'], 'iPod touch; CPU iPhone OS 7_' ) ) {
				return true;
		} else {
				return false;
		}
	}
}

function it_add_stylesheet() {
	$it_iphone_options = array();
	$it_iphone_options = apply_filters( 'grab_iphone_ops', $it_iphone_options);
	if ( false !== it_is_ios7( $ipad_enable = false ) ) { 
		?>
		<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') . '/style.css'; ?>" media="screen" />
		<style type="text/css">
			#header {
				font-size: 1.1em;
				clear: both;
				width: 100%;
	<?php 
		if ( !empty( $it_iphone_options['iphone_header_height'] ) ) {			
			echo 'height: ' . $it_iphone_options['iphone_header_height'] . ';' . '\n';	
			} else { ?>
				height: 103px;
		<?php } ?>
			}
			#navbutton {
				position: absolute;
	<?php 
		if ( !empty( $it_iphone_options['iphone_navbutton_margin'] ) ) {
			echo 'margin: ' . $it_iphone_options['iphone_navbutton_margin'] . ';' . '\n';
			} else { ?>
				  margin: 40px 0 0 270px;
	<?php   } ?> 
		 
			}

	<?php	
			if ( !empty( $it_iphone_options['iphone_custom_styles'] ) ) {
				echo $it_iphone_options['iphone_custom_styles'];
			} ?>
			
		 </style>
<?php	} else { ?>
		<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') . '/style.css'; ?>" media="screen" />
<?php	}  		
}

function it_add_viewport() {
	if ( false !== it_is_ios7( $ipad_enable = true ) ) { ?>
		<meta name="viewport" content="initial-scale=1.0"/>
<?php	} else { ?>
		<meta name="viewport" content="width=480px;"/>
<?php  }

}

function it_add_navbutton() {
	if ( false !== it_is_ios7( $ipad_enable = false ) ) { ?>
		<a id="ithemes_show_menu"><img id="navbutton" src="<?php echo bloginfo('stylesheet_directory') . '/images/IOS7arrow-d.png'; ?>" /></a>
<?php	} else { ?>
		<a id="ithemes_show_menu"><img id="navbutton" src="<?php echo bloginfo('stylesheet_directory') . '/images/arrow-d.png'; ?>" /></a>
<?php	}
}
?>

2b.) Note: Only use this code if you have copied the code above into your functions.php. Here are the three lines you need to edit and the php functions you need to replace them with:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

replace with:

<?php it_add_stylesheet(); ?>



<meta name="viewport" content="width=480px;"/>

replace with:

<?php it_add_viewport(); ?>



<a id="ithemes_show_menu"><img id="navbutton" src="<?php bloginfo('stylesheet_directory'); ?>/images/arrow-d.png"/></a>

replace with:

<?php it_add_navbutton(); ?>

2c.) After getting all the code right you need to copy the image mobile/themes/Banner/IOS7arrow-d.png to the images directory of your custom theme. If you cant find it, then the image is also included in the sample theme above.

That's it. After you have added the required code your custom mobile theme will now support IOS 7. If you have any questions or issues with this, please drop a line in the mobile support forum. http://ithemes.com/forum/forum/87-mobile/

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox