title: Responsive Website runs properly on simulator but not on actual devices
body: <p>I built responsive website which I wanted to be run on mobile devices and for that I wrote  media query also. I give my html format here:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta name='viewport' content="width=device-width, initial-scale=1.0"/&gt;
  &lt;meta charset="utf-8"&gt;
  ...&lt;!-- meta tags,scripts for mobile devices as well as others--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="home container-fluid"&gt;
  ...  &lt;!-- my first page--&gt;
  &lt;/div&gt;
  
  &lt;div class="home container-fluid"&gt;
  ... &lt;!-- my second page --&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there any change that I must do in HTML?
  this code works properly with desktop version and when I do inspect element on google chrome, it looks proper for all devices but not work when I tested on actual mobile device. Suppose, I wrote media query for iphone6 plus as follow:</p>
  
  <pre><code>@media only screen and (min-device-width: 414px) and 
  (max-device-height: 736px) and (orientation : landscape)
   {
     ...// styles for various classes and ids for landscape of iphone6+
   }
  
  @media only screen and (min-device-width: 414px) and 
  (max-device-height: 736px) and (orientation : portrait)
    {
     ... // styles for portrait mode in iphone6+
    }
  </code></pre>
  
  <p>Now, if I check by inspect element in chrome and check for  iphone6+, it looks properly but if I tried on actual iphone 6+ then it not worked well. 
  What can I do so that my website runs properly on actual devices. Currently, it only works for simulators.  </p>