mobile website design
How to design a Responsive Web Design / Mobile Responsive Design for Mobile Devices- Mobile Design. 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. (Responsive Design and mobile website design)
This Responsive Web Design is really easy with these codes just follow these steps and use these codes.
Related Article:Download Avast Free Antivirus 2016
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>
Mobile site
Contains HTML code. CSS width style with percentage. width : 100% . Take a look atMETA 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" />
responsive web design
responsive design, mobile website design, mobile web design, responsive website, mobile web development, responsive websites, responsive web, mobile website, responsive website design, responsive layout, responsive design examples, mobile website development, mobile web, mobile websites, best responsive websites, responsive sites, design mobile website, web responsive design, mobile website designer, responsive web design examples, mobile friendly websites, mobile responsive design, responsive site, web responsive, mobile website designers, best mobile website design, mobile design
responsive design, mobile website design, mobile web design, responsive website, mobile web development, responsive websites, responsive web, mobile website, responsive website design, responsive layout, responsive design examples, mobile website development, mobile web, mobile websites, best responsive websites, responsive sites, design mobile website, web responsive design, mobile website designer, responsive web design examples, mobile friendly websites, mobile responsive design, responsive site, web responsive, mobile website designers, best mobile website design, mobile design
META tag viewport for all smart phone devices (recommended Responsive Web Design)
Auto width adjustment.
<meta content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name = "viewport" />
EmoticonEmoticon