Non-responsive website - Viewport issue - Page showing zoomed in on mobile

I put together a page using html and css with a header, page content and footer with a width of 1170px (just like boostrap) adding together width+border+padding.

I'm also making use o the meta tag viewport. For this question I'm leaving it as attached bellow.

I was expecting the content (header, content, footer) to fit on the viewport (img 1) on mobiles and it does in some but I noticed that in some devices it's actually showing only part of the content and giving me a horizontal scroll bar (img 2).

I've been searching a lot about viewport but couldn't find a solution about how to make it looks like img 1 on all devices. Please advice.

You can view the live code at ViewPort Test . I'm not gonna change this one. For tests I'll be using the following, development

VIEWPORT

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

CSS

  *{
    margin:0;
    padding:0;
    border:0;
  }
  div.header,
  div.content,
  div.footer{
    width:100%;
  }
  div.header{
    background:blue;
  }
  div.content{
    background:orange;
  }
  div.footer{
    background:purple;
  }
  div.wrapper{
    width:1120px;
    border:10px solid green;
    padding:0 15px 0 15px;
    margin:0 auto;
    background:red;
  }

HTML

<div class="header">
  <div class="wrapper">
      <h1>Header</div>
  </div>
</div>
<div class="content">
  <div class="wrapper">
      <h1>Content</h1>
  </div>
</div>   
<div class="footer">
  <div class="wrapper">
      <h1>Footer</h1>
  </div>
</div>  

Answers


If you aren't using media queries and you just want the 1170px wide fixed layout to fill the mobile screen, then change this:

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

to this:

<meta name="viewport" content="width=1170">

Great Stuff, however, I have discovered that if you are on a desktop and the viewport is set to a static width the backgrounds may not render on the portions of the screen not shown when you horizontal scroll.

To fix this for non-responsive pages simply add a min-width to the body.

body {
    min-width: 1170px;
}

Note, this is in addition to setting the viewport a static width

<meta name=viewport content="width=1170">  

Considering that this is a non-responsive website all the metatag viewport needs it the website width, on my case, 1170px. The metatag viewport looks like this now:

<meta name=viewport content="width=1170">  

Need Your Help

object oriented approach from vb6 background

c# vb6

i came from a vb6 background and I'm slowly testing the c# waters. my problem is i have difficulty in adapting an object oriented approach in my programs as i tend to pattern my programs the way i ...