缩放仅适用于Chrome吗? [英] Zoom only works in Chrome?
问题描述
我希望 能够根据用户的屏幕大小来放大和缩小我的整个网站.我一直都在寻找解决方案，但是找不到太多了.
因此，有一天我以为我找到了一个解决方案，它在我的浏览器Chrome中效果很好.知道的问题是，我发现在经过测试的Firefox和IE 8的其他浏览器中不支持此功能.这是怎么回事?
I want to be able to make my whole website bigger and smaller depending on how big screen the user has. I have been searching like for ever for a solution, but there''s not much to find.
So, one day I thought I found a solution, and it worked great in my browser, Chrome. The problem know is that I''ve found out this is not supported in other browsers, tested Firefox and IE 8. How is that?
This is an example of the code I'm using in the CSS file that is loaded on every page:
@media screen and (max-width: 1300px){
#html, body {
zoom: 80%;
}
}
所以我想，也许不支持@media.但是经过一些测试，我现在知道缩放是问题所在.在浏览器中尝试以下代码以进行自我测试:
HTML代码:
So then I thought, maybe it''s the @media that is not supported. But after some tests I now understand that zoom is the problem. Try these codes in your browsers for testing yourself:
HTML code:
<html><head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="urltowhateverpicyouhave.jpg" />
</body></html>
CSS代码(test.css):
CSS code (test.css):
#html, body {
zoom: 50%;
}
其他浏览器有什么问题！?我知道IE的使用有些奇怪，但是Firefox ??
非常感谢您对我的问题有任何帮助.此外，任何可以在不同屏幕上放大或缩小网站的解决方案都将非常感激.
非常感谢:)
What is the problem with other browsers!? I know IE use to be a little strange, but Firefox??
Would really appreciate any help on my problem. Also, any solution wich will make the website bigger or smaller on different screens will be really thankful.
Thanks in advanced :)
推荐答案
我真的建议您避免使用Web应用程序缩放页面.我不是在谈论某些特殊情况，例如重新采样和平移某些需要高保真演示文稿的图像以及类似的东西.整个页面的缩放变得司空见惯.大多数现代版本的Web浏览器都实现了此功能，包括最新的IE版本，Seamonkey，Firefox，Chrome，但是它们以完全不同的方式来实现.用户可能想使用此功能.
也就是说，您的目标应该有很大的不同.您应该开发流畅的页面设计，而不是实施缩放并使用户困惑(只需考虑一下:用户将看到应用程序的缩放和浏览器缩放的组合；为什么?只是让用户发疯?).该页面应看起来可识别，可读性强，逻辑性强，易于定位的主题，并可以浏览所有主要浏览器的各种页面尺寸(以像素为单位)，缩放方法，缩放级别和呈现的细节.您不应该尝试使渲染完全相同-如今，这几乎是不可能的.相反，您应该符合我在上面列出的实用标准.
首先，记住主要的是内容，而不是装饰".设计的目的是清楚地呈现内容，而不是相反.
—SA
I would really advise you to avoid zooming the page using your Web application. I''m not talking about some special cases like re-sampling and panning some image which needs high-fidelity presentation and stuff like that. The scaling of the whole page is becoming a commonplace. Most modern versions of Web browsers implements this feature, including latest IE versions, Seamonkey, Firefox, Chrome, but they do it in very different ways. It''s likely that the users want to use this feature.
That said, your goal should be very different. Instead of implementing the zoom and confusing the user (just think about it: the user will see the combination of your application''s zoom and browser zoom; why? just to drive a user crazy?), you should develop fluid page design. The page should look recognizable, highly readable, logical, easy locate topic and navigate for the wide range of page sizes in pixels, methods of zoom, zoom levels and fine detail of rendering by all the major browsers. You should not try to make the rendering identical — these days, this is nearly impossible; instead you should meet the practical criteria I tried to list above.
First of all, remember the the main thing is content, not "decorations". The purpose of design is to present the content clearly, not the other way around.
—SA
这篇关于缩放仅适用于Chrome吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
