CHAPTER SIX
Simple Mobile Site
Most people have the same website they had five years ago and it can be very expensive to get a complete new site made. Im going to give you a little trick here that can be used to mobile optimise most HTML websites without any major changes.
Simply put:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
In the head section of your site like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="description" content="">
<META NAME="geo.position" CONTENT="-2.24528; 53.47894">
<META NAME="geo.placename" CONTENT="Manchester">
<META NAME="geo.county" CONTENT="Greater Manchester">
<META NAME="geo.postcode" CONTENT="M2 5">
<META NAME="geo.region" CONTENT="North West">
<META NAME="geo.country" CONTENT="England">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body>
</body>
</Html>
Then put:
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
Inside your websites CSS file. This small script will help mobile optimise almost any site, and if for any reason there is a section of your site that still isn’t working on a mobile, you can simply wrap it in a div as follows.
Put <div> then </div> around the content section which is playing up on a mobile phone, then add a class to the first div like this <div class=“notonphone”> then add the following to your websites style.css file
@media screen and (max-width: 600px) {
.notonphone {
display:none;
}
}
And it won’t show up anymore on a mobile phone if you increase the 600px to 768px that should stop it showing on most tablets as well.