{"id":664,"date":"2009-06-12T12:15:41","date_gmt":"2009-06-12T02:15:41","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=664"},"modified":"2021-04-26T17:51:14","modified_gmt":"2021-04-26T07:51:14","slug":"making-a-website-iphone-friendly-using-css","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2009\/06\/12\/making-a-website-iphone-friendly-using-css\/","title":{"rendered":"Making a website iPhone-friendly using CSS"},"content":{"rendered":"

Unlike any other mobile web browsers, iPhone comes with Safari browser which makes it possible to view any website that works on Safari. However, the challenge is that the screen size of an iPhone is not as big as a traditional monitor and therefore, if you have got a website which has a width of say, 1000px, the website will appear really small and unreadable on an iPhone screen. <\/p>\n

\"Screenshot
\nScreenshot of Web Development Blog on iPhone<\/em><\/p>\n

Here are the steps to make a website iPhone-friendly using just CSS. <\/p>\n

1. Create a separate stylesheet for iPhone<\/h3>\n

Tips:
\n1. Hide unnecessary elements<\/strong>
\nOn this blog, I set the following elements to display: none<\/code> in CSS. Use display: none rather than visibility: hidden because visibility: hidden will also hide the content inside an element and not hide the element completely.
\n2. Use a fluid layout <\/strong>
\nSet the width of your main container (or any other containers) to 100% rather than a specific width in pixel. <\/p>\n

For example: <\/p>\n

\r\nbody {\r\nbackground-color: #fff;\r\n}\r\n\r\n.header, .footer {\r\nwidth: 100%;\r\n}\r\n\r\n.sidebar {\r\ndisplay: none;\r\n}\r\n<\/pre>\n
\r\n<link media="only screen and (max-device-width: 480px)" href="\/iphone.css" type= "text\/css" rel="stylesheet" \/><\/pre>\n
The viewport of an iPhone is 320 pixels in portrait orientation and 480 pixels in landscape orientation. <\/p>\n
2.  Specify meta data for viewport<\/h3>\n
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" \/><\/pre>\n
Here, I am not specifying any width because I am using a fluid layout.  Setting the user-scalable property to 0 (false) ensures that the user isn't able to zoom in or out the website.  Refer to Safari HTML Reference - Supported Meta Tags<\/a> to see any other meta tags that you might want to use.  <\/p>\n
3. Create an icon<\/h3>\n
This is very much like a favicon that will be used when the user add your website to their home screen.  Use the following code to specify a custom icon.  The icon should be at least 57x57 pixel.  <\/p>\n
<link rel="apple-touch-icon" href="\/iphone.png" \/><\/pre>\n
\"apple-touch-icon\"
\nAn example of apple-touch-icon for Facebook<\/em><\/p>\n
\"apple-touch-icon\"
\nAn example of apple-touch-icon for Web Development Blog<\/em><\/p>\n
4. Putting it altogether<\/h3>\n
Add all of the above to the <head> section of your website.  <\/p>\n
\r\n<!-- Start iPhone -->\r\n<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" \/>\r\n<link rel="apple-touch-icon" href="\/iphone.png" \/>\r\n<link media="only screen and (max-device-width: 480px)" href="\/iphone.css" type= "text\/css" rel="stylesheet" \/>\r\n<!-- End iPhone --> \r\n<\/pre>\n
For WordPress (template specific)<\/strong><\/p>\n
\r\n<!-- Start iPhone -->\r\n<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" \/>\r\n<link rel="apple-touch-icon" href="<?php echo bloginfo('template_url'); ?>\/iphone.png" \/>\r\n<link media="only screen and (max-device-width: 480px)" href="<?php echo bloginfo('template_url'); ?>\/iphone.css" type= "text\/css" rel="stylesheet" \/>\r\n<!-- End iPhone -->\r\n<\/pre>\n
A few things to note<\/h3>\n