How to Increase browser zoom level on page load?

2019-01-02 18:27发布

站内问答 / JavaScript
690 4 3

How to increase browser zoom level on page load?

here is my web link recently i got the task to increase its width just like if Firefox we press Ctrl + and browser zoom level is increases is there any way to do this automatically in all browsers on page load.

4条回答
何处买醉
2楼-- · 2019-01-02 18:41

You can try the CSS zoom rule. I've never really tried it, but in theory setting a css rule like the following might do what you want:

body { zoom: 2; }

Note: this doesn't actually modify the browsers zoom level. It just makes everything on the page bigger :)

查看更多
0人赞 添加讨论(0) 举报
查无此人
3楼-- · 2019-01-02 18:45

That is an answer to narrow-minded posts like

Personally I think this is a bad idea;

or

why not style it to be bigger

e.t.c

I have PWA which has a minimalistic design with a lot of whitespace and intended for mobile phones in the first place (so initially I didn't think about big screens). It is not just boring web site with articles. It is rather complex enough UI.

So when you open it on a very big screen (tv or large monitor) it looks really ugly (because it is too much whitespace at that point). And as a user, I need every time zoom it in. It is quite stupid. My webapp is more aesthetically pleasing as well as easier to use from a sofa on tv when it is scalled up a bit on that large screen.

So what I am doing, in @media I change zoom property if a display is too wide. The problem that -moz-transform: scale is absolutely different from zoom.

So bottom line if you want to zoom website with css you have three options:

  • (recommended, harder for existing page) To use em and rem units while developing your page. That will allow changing "zoom" of the page as easy as changing font size on body.

  • (easier for existing page) To use "transform: scale" for cross-browser experience, but it may work not as you expected.

  • (not-recommended, easy for existing page) To use CSS "zoom" property despite the fact that it is not a standard property. Sacrifices Firefox. Also, have some minor unexpected behavior with absolutely positioned flexboxes.

查看更多
0人赞 添加讨论(0) 举报
人间绝色
4楼-- · 2019-01-02 19:01

Personally I think this is a bad idea; either design your site so it scales easily (not hard with proper CSS/HTML techniques) or just allow the user to do what they want (maybe they already have their browser zoomed or they use low resolution). Typically you should not make UX decisions for people.

But it is possible.

Demo: http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

Note that previous versions of this answer used transform to support more browsers. However, this shortened code appears to work for current versions of Chrome, FF, Safari and IE (as well as previous versions of IE, which have supported zoom for a long time).

查看更多
0人赞 添加讨论(0) 举报
柔情千种
5楼-- · 2019-01-02 19:01

Try this:

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)