CODEWITHSUNDEEP
htmlcssresponsive-design
Kokodoko
Kokodoko

Reputation: 28158

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

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?

Upvotes: 1

Views: 3767

Answers (1)

Lauren
Lauren

Reputation: 1536

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

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

Upvotes: 2

Related Questions