How to ensure mobile layout isn't too wide and zooms in?

Question

I have a layout:

mobile layout

The problem I face is that it's too wide. I need it to be max 640px wide.

I know how to set CSS that defines a max width, but then what happens is that the layout is capped at 640px, and it is NOT SCALED. So I'm left with empty space.

The screenshot is of Nexus 7 with a high resolution. I want to set my layout to max 640px, and SCALE IT UP to the screen size.

I tried:

<meta name="viewport" content="width=640, maximum-scale=2, minimum-scale=1">

And it worked perfectly, I saw a 640px wide layout scaled to the screen. HOWEVER, it looks horrible on smaller resolution devices like iPhone 5, because it forces iPhone to have 640px wide viewport.

Is there a way to have a min 320 - max 640 pixel wide layout, depending on mobile screen resolution, and then have it be SCALED to the screen instead of leaving empty space?

Here's an example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=200">
<style>
body {
background: green;
width: 200px;
}
</style>
</head>
<body>
<div style="background:red; width: 200px; height: 200px;">
</div>
</body>
</html>

It looks like this: http://d.pr/i/LOZ7

How do I make the red fill the screen? How do I make it scale up so that it's horizontally filled?

Ryan · Answer 1 · 2013-08-02T16:37:16.210

3

You can use the viewport to `device-width', i.e.:

 <meta name="viewport" content="width=device-width">

and additionally include a minimum width. Then use media queries to adjust how the display would work for devices with a width larger than 640px.

Additionally, be sure to specify the width of your content elements in percentages. That way, content will be scaled by the browser to fill the available space.

edited Aug 02 '13 at 16:37

answered Aug 02 '13 at 16:32

Ryan

26,884
9
56
83

I tried `device-width` with CSS that makes the layout 640px wide for larger screens. The result is that I see 640px wide layout with empty space around it. I want the browser to scale the 640px to the available 1920px screen. – Ahmed Aug 02 '13 at 16:41
I would recommend changing the body CSS to `body { background: green; width: 100%; }` and the `div` definition to `
`. that way the content will adjust no matter what the browser width is.
– Ryan Aug 02 '13 at 17:07
I'm afraid you still don't get my goal :) I know that I can make the CSS go fluid with 100%, just like it is in the screenshot above. It's 100% width filling all space. I don't want that. I want it to be an exact size (in this case 640px), and I want it to ZOOM IN so that the remaining space is filled with my 640px content. If I set `100%` for the body and div in that sample snippet, it won't zoom in, instead the layout will get wider. I want the layout NOT get wider, I want it to SCALE up. – Ahmed Aug 02 '13 at 17:18
Please look at the original screenshot, that's 100% layout there and I don't want that. I want to restrict layout to a smaller size, and have the browser ZOOM IN. How do I do that in the sample snippet I posted, for example? How can I make the red box to zoom in and keep the dimensions I want? It's easy by modifying the initial-scale, for example, but mobile devices come in different sizes. – Ahmed Aug 02 '13 at 17:19
Hi @Ahmed - as far as I know there is no direct way to manipulate the browser zoom with CSS. You do get javascript plugins that will adjust zoom (by changes e.g. font sizes), but the viewport scale is device dependent. See e.g. http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level – Ryan Aug 02 '13 at 17:48

score 2 · Answer 2 · answered Aug 02 '13 at 16:28

2

Use media queries to target specific devices.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

answered Aug 02 '13 at 16:28

Shivam

2,208
3
24
39

I'm alreading targeting. I can get the layout in proper size, that's not the problem, the problem is that if the layer is e.g. 640px wide, I see empty space around it, rather than have it scaled up. – Ahmed Aug 02 '13 at 16:42

score 1 · Answer 3 · answered Aug 02 '13 at 16:46

1

You should be using this :

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

This would ensure the layout gets adjusted itself without actually having to declare a width.

answered Aug 02 '13 at 16:46

Roy M J

6,926
7
51
78

Updated question. I just tried your answer, it does not work either. The layout definitely is not adjusted. – Ahmed Aug 02 '13 at 17:03

How to ensure mobile layout isn't too wide and zooms in?

3 Answers3