How to scale an entire webpage down to ipad or phone size


Tags: html,css,responsive-design

Problem :

I'm fairly new to responsive CSS design, and I just can't get a very simple thing working. I have a DIV that is about 1200px wide. I want this div to display scaled down to the maximum screen size when viewed on an iPad or smartphone.

For example, when you visit a non-responsive website on a smartphone, you will see the entire website scaled down to a tiny size on the phone screen. This is actually non-responsive, but somehow I can't reproduce that scaling-down effect:

My divs:

<div id="app">
    <div id="screen">This is my screen</div>
</div>

My css:

html,body {
  margin:0px;
  padding:0px;
}
#app {
  width:1200px;
  height:800px;
  background-color:#CCCCCC;
  overflow:auto;
}
#screen {
  width:800px;
  height:400px;
  margin: 0 auto;
  background-color:#ABABAB;
}

/* this is only for large screens: scale the background up to fill the entire screen */
@media only screen and (min-width : 1200px) {
  #app {
      width:100%;
      height:100%;
      background-color:#999999;
  }
}

JSFiddle here. How do I display these divs scaled down on small screens?



Solution :

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

This will give you the scaling you're looking for.


    CSS Howto..

    How do I apply padding or a margin to this heading displayed as a table-cell?

    how to remove css property using javascript?

    how to place image on image?

    How to target a specific browser of a specific device via CSS?

    CSS, how to align a button vertically next to large images

    How can I configure this gulpfile the right way to have a nice workflow

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to apply css to div content based on regex

    How to use position in CSS?

    How to get css class name using Selenium?

    ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

    How to achieve image changing on hover?

    Chrome doesn't show the favicon

    How to Auto-Resize a DIV with CSS while keeping Aspect Ratio?

    How to make right and bottom css properties work on a textarea in IE? (IE9 and below)

    how to set part of circle as background in css

    how to stop this irritating css behaviour

    How to change custom Check Box border with Dart

    How do i hide html until its processed with javascript?

    How can I make this jQuery effect responsive?

    How can I simply freeze the first row of my table using pure Javascript, no plugins?

    How to fix position of html element label with css?

    how to get a grid of different sizes using css and javascipt

    How can I style html/form elements using CSS?

    How to align image with text in a table ? (jquery datatable sort image with text in table header)

    How to include image into css file using JSF tag

    How div automatically adjust their size and positions the element inside it

    How to toggle css visibility with Javascript

    How to select the second paragraph after another with css?

    CSS: How to flow text around both left and right images