How to design a website for mobile devices (smart phones). Next web world with smart phones so start working on mobile templates. In this post I want to explain very basic HTML design tip with adding a meta tag. I had implemented this at touch.9lessons.info, try to access this link with any smart phone Eg: Iphone and Android devices.
Live DemoRelated article : Introducing 9lessons iphone Web Application
Normal site
Contains HTML code. CSS width style fixed with pixels. width : 900px
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Normal Website</title>
<style>
#container
{
width:900px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Normal Website</title>
<style>
#container
{
width:900px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
Mobie site
Contains HTML code. CSS width style with percentage. width : 100% . Take a look at META tag viewport.
<html>
<head>
<title>Mobile Website</title>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />
<style>
#container
{
width:100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<head>
<title>Mobile Website</title>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />
<style>
#container
{
width:100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
META tag viewport for Iphone
Width fixed 320
<meta content = "width = 320,initial-scale = 2.3, user-scalable = no" name = "viewport" />
META tag viewport for all smart phone devices (recommended)
Auto width adjustment.
<meta content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name = "viewport" />
Apple developer meta tags information
Redirect iPhone, Blackberry, & Palm Requests With .htaccess
Beginning iPhone 3 Development: Exploring the iPhone SDK
Nice post,..
Can you please tell me any online simulator for iPhone?
BTW useful post.
Great post Srinivas. Nice and simple, I need to create a mobile version of my site one day. :-)
nice post .. anyway any online emulator for iPhone viewer or else?
regards
Well explained design post for mobile device..
Thanks
hey , nice blog , like it ,
won't be nice if i u can clickover to my blog page too ,
& post some suggestion
Hi . Now i gonna make my site available for mobile devices , and i have AJAX jQuery chat . But javascript don`t work with mobile browsers and chat don`t work for it , so if u have some code to make it work please post it some where .
Sorry for my bad english .
Thanks for u r information
its very useful
Great useful information. i have a small doubt can you please clarify
How to Use CSS3 Media Queries to Create a Mobile Version of Your Website?
Thanks for u r information
its very useful
Any idea for viewing our own language site or creating a site with our language...and one more question, if im already having a site, ex: www.soandso.com i need - wap.soandso.com
but im not able to access the wap site i tried your tutorial .......Reply Please
Thanks for u r information
its very useful
Thanks for u r information
its very ueful
Thanks for u r information
its very ueful
Thanks for the site its awesome site for the visitors.
@austria
Thank you
Good advice. We often advise our students to take a step back and understand what they are getting into. This article reinforces that concept with some practical advice.
This is really a nice blog i like to read this blog daily it has got all the informative stuff that i want to know about. i want to subscribe it so can tell me when your blog gets updated.
I like this article because themes was interesting,helpful but ,give more info about that when you update. Thanks
Nice and very cool article.But it work in wml supported mobile phone?
really excellent tutorials..........great yaar
Keep it up! Good topic was explain related to daily life. In this clear the ideas to solving the problems in our life then I like to add my bookmark also subscribe it..
thanks
Best of luck. Good solutions in this blog. Included more information in future for the successive blog. Good luck
Is there any different limit of meta tags for mobile website or its same as of desktop browser...?
it is very cool. I have one question is it the same way that facebook did his downloadable mobile application??????