11

Is it possible to set the default zoom level on a site? For instance, could I code my site in such as a way that it is zoomed to 125% when a user opens it?

My website body has this code

<body ID="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}"> 

How to put this zoom code inside?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
user1820652
  • 178
  • 2
  • 3
  • 9
  • 5
    Why is this being downvoted? The question is quite clear. – Brad Nov 20 '12 at 08:21
  • 1
    Why not just increase the font size and all fixed padding and margins? – John Dvorak Nov 20 '12 at 08:22
  • 4
    @relentless, There is clearly a language barrier here. Folks doesn't always know how to ask for help. This is a small-scope question and is definitely appropriate for Stack Overflow. It would be different if he was asking for something broader. – Brad Nov 20 '12 at 08:24
  • @relentless prior research effort is not always possible. Defining a small enough question (breaking down the problem) counts as research effort. – John Dvorak Nov 20 '12 at 08:25
  • @Brad Without ragging on this too much, the first result in Google for "how to zoom website with css" is this link http://stackoverflow.com/questions/1156278/how-can-i-scale-an-entire-web-page-with-css. – Paul Dessert Nov 20 '12 at 08:28
  • @relentless, ... then flag it as a duplicate instead of downvoting, which is useless in this situation. – Brad Nov 20 '12 at 08:29

4 Answers4

7

Add zoom: 125%; to body style

body {
color: #536482;
background-color: white;
zoom: 125%;
}
Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • 1
    You added zoom to body and html instead of just to body as you say. – eisberg Nov 20 '12 at 08:25
  • my website body has this code how to put this zoom code inside ?? – user1820652 Nov 20 '12 at 09:02
  • this is not to be added in body tag. ad the above css in your style sheet – Sowmya Nov 20 '12 at 09:12
  • @duellsy is there any restriction mentioned in question for css3?? – Sowmya Nov 20 '12 at 09:33
  • 1
    @SowmyaShivaram I was giving the poster more information, not discounting your answer – duellsy Nov 20 '12 at 10:06
  • @duellsy tat is not the way to give more information. if css3 is worth nothing then y does it exist even? – Sowmya Nov 20 '12 at 10:08
  • 1
    @SowmyaShivaram it's completely worth noting... if they were to use your solution of using zoom, then saw it didn't work in older browsers they would wonder why, my comment lets them know that it's a CSS3 only element which would explain it not working in older browsers. – duellsy Nov 20 '12 at 10:11
  • it's also completely worth noting to argue – Sowmya Nov 20 '12 at 10:12
0

This does not directly answer your question, but is an alternative that I recommend considering.

If you use relative sizing for your page (such as em), then you can set the base size of the site in one place, and the whole page will scale up and down accordingly.

For instance, if I want 125% of default size:

body { font-size: 1.25em }

Then, suppose I want a reasonable amount of margin around a header <div>:

#header { margin: 1em }

If I then go back and change that base size on the body to something else, the margin on my header will scale with it. If you do your entire page in relative units, this becomes very easy to do.

Brad
  • 159,648
  • 54
  • 349
  • 530
-1

You might want to check the zoom CSS attribute. Bear in mind however that it is part of CSS3 and that, therefore, you might find it to behave oddly on old IEs. This is also completely separate from the interface zoom.

Sébastien Renauld
  • 19,203
  • 2
  • 46
  • 66
-5
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp));
                            webView.getSettings().setLoadsImagesAutomatically(true);
                            webView.getSettings().setJavaScriptEnabled(true);
                            webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
                            webView.loadDataWithBaseURL(null,htmlContent,"text/html","UTF-8", null);
                            webView.getSettings().setBuiltInZoomControls(true);
                            webView.getSettings().setSupportZoom(true);
                            webView.getSettings().setDisplayZoomControls(true);
                            webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);