Solved

How to set the zoom level of an entire site in any browser

Posted on 2014-11-20
5
181 Views
Last Modified: 2014-11-26
This question is not about how a user would set the zoom level of a page depending on the browser they are using at the time. I am referring to something in CSS like zoom: 90% in CSS or some js or some other code. I realize a page can be designed and built responsively, or just reduced, but this is not such a design, the site it built and I don't want to rebuild the site. I'm lazy I guess.

This site has content with a background image. I want the users to see more of the background image on desktops and portable devices. It would be like Control and + or - keys on your keyboard to zoom out, but I want the site to open and remain at a specific zoom level lower than 100% or 0 unless the user chooses to zoom in. Is this possible? I tried
body { zoom: 88%; } but it doesn't work. The site is html5.
0
Comment
Question by:weknowjack
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40456255
Zoom is just a user function.  There is nothing in HTML or CSS to control it.
0
 

Accepted Solution

by:
weknowjack earned 0 total points
ID: 40456272
I just learned about the CSS transform property and it works in most browsers.

#container {
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -o-transform: scale(0.85);
    -ms-transform: scale(0.85);
}
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40456306
That's interesting.  Here is a page about 'transform' along with some demos: http://www.w3schools.com/cssref/css3_pr_transform.asp  I would imagine the user's 'zoom' function could still over-ride that.
0
 

Author Comment

by:weknowjack
ID: 40457845
Thanks for your replies Dave. Yes, the user can override it which is fine. It also has some browser limitations but good enough as is for my purposes.
0
 

Author Closing Comment

by:weknowjack
ID: 40466465
The only comment I received was incorrect. I did further research and found the right answer myself.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question