Question

im designing a website and i have screen resolution problem. I want to scale my page but i cant do it.

Its my website and 21.5 inc mac screen: (its done, no problem)

Its my laptop screen 1366 x 768 px resolution;

I tryed this on css;

body, html {height:100%;}

and this on html;

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

Doctype is: XHTML 1.0 Transitional

but doesnt work. How can i do it?

Thanks!

Answer 1

Basically, you can’t in a simple, easy way.

The viewport tag and all that is only for Mobile devices (currently), as they load the whole page and pan around it, in a different way to Desktop browsers.

Most websites are designed to scroll vertically, so CSS caters really well to horizontal stretching, but very very poorly for vertically doing the same thing.

One way that you can do this, is to design various different versions, then use media queries to change the properties for different heights.

In your CSS, this looks like:

#box {
    width:100px;
    height:100px;
    background-color:red;
}

@media all and (max-height: 400px) and (min-height: 200px) {
    #box {
        background-color:green;
    }
}

This would make a box that is red, unless the screen is between 200px and 400px high. You can use that technique to do different things when the screen is different sizes. This is pretty well supported these days. (http://caniuse.com/#feat=css-mediaqueries – basically everywhere but IE8 and down).

Another way is to use viewport units (vh instead of px or em) where 1vh = 1% of the browser height. That is super badly supported right now (http://caniuse.com/#feat=viewport-units – No firefox, no Opera, IE9 and up).

Other than that you are looking at using javascript to adjust the height of your circular menu so that it scales. jQuery is the thing to look at if you haven’t already sussed out JS.

In short though, to keep things easy:

• Design sites that scroll vertically
• Design sites that can’t scroll carefully, and define different behaviour for 600px, 768px, 720px and 1080px high screens (remembering to subtract the height for browser chrome here, which I guess you can estimate as somewhere between 100-300px)