Chrome和Firefox浏览器默认缩放

编程入门行业动态更新时间:2024-10-25 18:24:19

本文介绍了Chrome和Firefox浏览器默认缩放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我对此页面有疑问.我在Firefox的默认缩放级别上开发了它.我是个白痴，我还没有在Chrome上测试过它.因此，现在我发现在Chrome和其他基于Webkit的浏览器上，页面的布局和/或字体大小有所不同. Chrome的默认缩放级别为75％，因此Chrome上的所有内容都会变小.我不得不说，我已经制作了十二个Web应用程序，但都集中在应用程序的后端，并且从未对页面在不同浏览器上的外观提出过很多想法.

I have a problem with this page. I developed it in Firefox on it's default zoom level. The idiot that I am, I haven't tested it on Chrome. So, now I see that the page's layout and/or font size is different on Chrome and other Webkit based browsers. Default Chrome zoom level is 75% so everything is smaller on Chrome. I have to say that I've made a dozen of web apps but have concentrated on the backend side of the application and never put many thoughts in how the page looks like on different browsers.

我的意思是，我必须解决javascript跨浏览器的问题，但这是我从未遇到过的事情.

I mean, I have if javascript cross browser stuff had to be addressed but this is something that I never came across.

我认为这是错误的，是字体大小.我有一个#main-wrap，它包装了整个应用程序，基本字体大小为16px.因此，#navigation a之所以具有0.7em，是因为这样在Firefox中看起来很正常，而在Chrome中看起来很小.

What I think is wrong with this is font size. I have a #main-wrap that wraps the entire app and has a base font size of 16px. So, #navigation a has 0.7em because that way it looks normal in Firefox, but looks really small in Chrome.

任何人都可以发表一些有关这种情况的提示或提示吗?

Could anyone post some tips or hints as to way this is happening?

编辑:

我已经解决了问题

zoom: 1.29; -moz-transform: scale(1); -moz-transform-origin: 0 0;

它可以工作，但是据我所知，这样做是很好的.是否有CSS技术可以使页面在浏览器中看起来一样?

And it works but, as I know, it's a good to do this like this. Is there a CSS technique do make pages look the same across browsers?

推荐答案

我也遇到了这个问题.使用@viewport标签效果很好.以下是我用来解决问题的文章:

I've had this issue as well. Using the @viewport tag works well. Here are the articles that I used to resolve the issues:

Firefox @viewport标记- developer.mozilla /zh-CN/docs/Web/CSS/@ viewport
设置视口和缩放- css-tricks /snippets/html/response-meta-tag/
为确保字体在浏览器中正确显示粗细，有关伪字体粗体的文章为 alistapart/article/say-no-to-faux-bold

Firefox @viewport tag - developer.mozilla/en-US/docs/Web/CSS/@viewport
Setting viewport and zoom - css-tricks/snippets/html/responsive-meta-tag/
To make sure fonts display weight properly across browsers, an article regarding faux font bolding is alistapart/article/say-no-to-faux-bold

有很多类似的问题和建议.这对我有帮助:

There are a lot of similar questions with suggestions. Here's one that helped me: