Photoshop Question posted in
The official user guide can be found here.

Scaling HTML/CSS to fit various monitors, is it possible? – Photoshop

I know SVG supports this. But I’m wondering if HTML/CSS can be scaled up and down, like an image to fit various monitors? For example, think an HTML5 phonegap based mobile app that just “works” on many of the different sized screens from iPhone (3,4s,5,etc), android, etc and the multitude of screen sizes out there.

I’m not talking about using percentage widths, like 100%, or 20% within the divs, em for fonts, or a bunch of media queries. I’d like to use absolute width/heights on my divs because it’s easier to program.

So for example, let’s say I create an app that’s 400px width, and 600px height and everything within that div (buttons, more divs, images, etc) also uses pixel heights and widths and positioning.

Now, is there a way to just “scale” this thing to any resolution I want like an image? Kind of just like surrounding it by 

<scaleToDevice>
<div style='width:400px;height:600px'>
    ... All my other UI here, like buttons, etc would use absolute positioning with pixels
</div>
</scaleToDevice>

and it’d “just work” think of like how you scale an image in Photoshop. Except this would just be on HTML/CSS, scale to the device’s 100% width and height, and the app would remain interactive.

Tags:

2

Answers


  1. 0

    You want to look at using CSS viewport width/height (vw/vh) properties.

    http://snook.ca/archives/html_and_css/vm-vh-units

    This way you can base all your width/height/sizes (in CSS) off these vw, vh properties, and with the correct math you entire site can scale up and down with the resizing of the window.

    Login or Signup to reply.
  2. 0

    it’s possible, you’ll need to use the CSS transform property. However, keep in mind you’ll need some maths to do, because you’ll need to keep in mind orientation as well as screens’ aspect ratio. But well, if you want to do it, you can do it. Here’s some code I gave to another user that you can use as a starting point:

    #body {
    width:100vw;
    height:100vh;
    text-align:center;
}
#content {
    transform: translateY(-50%);
    -webkit-transform:translateY(-50%);
    top:50%;
    transform: scale(2);
    transform-origin: 0%;
}

    This will also make the scale of element grow from center (which will look better for example on mobiles if you’re rotating views. You may also add transitions for smoother effects). So go ahead, try it. But there’s a reason why nobody else doesn’t do it: the effort isn’t worth the final result, you’ll end always needing a fine tuning

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search