Creating An IPhone Compatible Sweetcron Theme

IPhone Compatible Sweetcron Theme

IPhone Compatible Sweetcron Theme

If you ever wanted to create a sweetcron theme that can be viewed in both computer browser and iphone browser differently, this some tips for you.

Viewport Meta Meta tag

The viewport meta tag enable the web developer to set the initial scale, minimum scale and maximum scale of the web page. The user-scalable parameter in the meta tag can be used to turn user scaling on/off

<meta name=”viewportcontent=”width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;” />

the viewport meta tag shown above set the content width to device width, its initial scale, minimum scale and maximum scale to 1.0 (original scale) and turn off the user scaling. The meta tag can be added inside the html header of the page.

Conditional CSS

You can use conditional CSS to create different layouts for specific platforms and mobile devices. Using CSS3 media queries, you can add iPhone-specific style sheets to your webpage without affecting how your webpages are rendered on other platforms.

CSS3 recognizes several media types, including print, handheld, and screen. iPhone 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.

To specify a style sheet that is just for iPhone 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 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, use the following expression:

<link media=”only screen and (max-device-width: 480px)href=”small-device.csstype= “text/cssrel=”stylesheet“>

to specify a style sheet for devices other than iphone, use the following expression:

<link media=”screen and (min-device-width: 481px)href=”not-small-device.csstype=”text/cssrel=”stylesheet“>

User Agent String

Different browser will have different user agent string. The user agent string will be stored inside the variable $_SERVER[‘HTTP_USER_AGENT‘]. Shown below are the user agent string for IPhone and IPod Touch:

IPhone:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/XXXXX Safari/525.20

IPod Touch:

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

We can utilize the user agent string to output different html for the IPhone/IPod Touch browser. For example, I changed the content of sweetcron _header.php to have only this line:

<?php if (stristr($_SERVER[‘HTTP_USER_AGENT‘], “iPhone“)){

$this->load->view(‘themes/‘.$this->config->item(‘theme‘).’/_header-iphone‘)

}else{

$this->load->view(‘themes/‘.$this->config->item(‘theme‘).’/_header-normal‘)

} ?>

The above line of code signify that, If the webpage is viewed from iphone the header file that will be used is _header-iphone.php, else, _header-normal.php will be used. The same method can be applied to the items.php, _footer.php and single.php.

Javascript

We can use javascript to change the html view when the iphone orientation is changing:

function updateOrientation(){

var orientation=window.orientation

switch(orientation){

case 0:

//potrait mode
break;

case 90:

//landscape left mode

break;

case -90:

//landscape right mode
break;

}

}
// execute the updateOrientation function when iPhone switches between portrait and landscape modes.
window.onorientationchange=updateOrientation;

IPhone Integration

The major problem when we want to view sweetcron page inside the IPhone is, IPhone cannot show the youtube video. So, in order to solve that problem, we can use IPhone integration. We can integrate the youtube link with the IPhone’s internal youtube viewer. Instead of showing the video inside the web page, we just show the button that links to the youtube video. using the sweetcron syntax:

$item->get_original_permalink()

When viewer click on the button/link, the IPhone’s internal youtube viewer will automatically opened.

IPhone/IPod Touch Scaling:

Lastly, we must also know the scaling of the IPhone/IPod Touch screen to design a web page compatible for them. The picture below shows the potrait and landscape scaling.

IPhone potrait measurement

IPhone potrait measurement

IPhone landscape measurement

IPhone landscape measurement

picture source: http://developer.apple.com/webapps/

That’s all for now. If you want to view the IPhone compatible sweeetcron theme in action, have a look at http://brainstorm.pro/. Try to view it from both the IPhone and Computer browser.

Advertisements

3 thoughts on “Creating An IPhone Compatible Sweetcron Theme

  1. The php command for switching style sheets won’t work with an iPod touch. As you showed just above those lines of code the user agent string of an iPod doesn’t include the word “iPhone”. Or the user agent string is mistyped.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s