ADVERTISEMENT

 

CHAPTER SIX

Simple Mobile Site

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.

ADVERTISEMENT

ADVERTISEMENT