Viewport metatag

Question

I have added to following view port metatag to my head section of PHTML file:

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

But when I try to view it in Mobile it displays very narrow like the website is displayed only in half of screen of mobile while the other half of mobile is blank. Can any one please guide whats wrong? any CSS I have to add to make it look good or any change in viewport settings. I have tried to add css 100% for viewport.

Answer 1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

css

@media screen and (max-width: 750px){
  #yourid{
    width: px;
  }
  .yourclass{
    width: px;
  }
}

@media screen and (min-width: 360px){
  #yourid{
    width: px;
  }
  .yourclass{
    width: px;
  }
}

@viewport{
    zoom: 1.0;
    width: device-width;
}

with javascript.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
var li = document.createElement('link');
li.type = 'text/css';  
var href='mobile.css';   
//var href=('https:' == document.location.protocol ? 'https://' : 'http://') +'thesite.com/api/widgets/pages.css';
li.setAttribute('href', href);
li.setAttribute('rel','stylesheet');
var s = document.getElementsByTagName('head')[0];
s.appendChild(li, s);
}