Make only mobile based website

Question

I am less confused to make a website only for mobile and tablet not a desktop. I need to know only one thing.

1. Should I use <meta name="viewport" content="width=device-width, initial-scale=1"> and define @media only screen for specific device?

Answer 1

Yes, however your website still will be accesible from other devices.I can explain it for you:

Using tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

It will adjust webpage width to match device width and set initial scale to 1 (no zooming). So for example, if you open this page using iPad, web browse will display page in 1024x768 (landscape) or 768x1024 (portrait).

initial-scale=1

This will force to display webpage with zoom set to 1.

Using media queries CSS3 you can set different CSS styles for different devices:

Styles for Tablets

@media screen and (min-width: 768px) and (max-width: 1024px) {

   /* Styles for tablets */
 }

Styles for Desktop

@media screen and (min-width: 1025px) and (max-width: 1280px) {

   /* Styles for Desktops */
 }