Solved

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

Posted on 2014-11-20
5
171 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
  • 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…

816 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now