当用户更改页面中的缩放时,是否可以使用JavaScript检测?我只是想捕捉一个"缩放"事件并对其做出响应(类似于window.onresize事件).
谢谢.
如何在页面加载时提高浏览器缩放级别?
这里是我的网站链接最近我得到了增加其宽度的任务,就像我们按下的Firefox Ctrl +和浏览器缩放级别增加有任何方法在页面加载的所有浏览器中自动执行此操作.
我想找到CSS像素和设备像素之间的比例.
编辑:我应该意识到这只是缩放级别.我已经添加了关于缩放级别的规范参考的答案.
CSS像素是我们几乎用于所有事物的单位 - 它是element.style.width,element.clientWidth,element.offsetWidth等的含义.设备像素是浏览器实际绘制的像素.在设备像素中测量一些属性,例如window.screen.width,其是在用户放大时不改变的屏幕尺寸(例如1024).
动机:当用户放大时,我想增加画布的宽度和高度(同时保持style.width和style.height相同的CSS像素值),scale()上下文,并在更加清晰的放大画布上重绘.
我在Surfin的Safari上读过Quirksmode的两个视口故事和高DPI,但他们都没有说如何获得这个比例.到目前为止,我唯一的想法是收集mousemoves并测量event.clientX中的更改除以event.screenX中的更改,或以编程方式创建媒体查询moz--min-device-pixel-ratio,使用getComputedStyle(),测试规则是否匹配,并使用二进制搜索缩小规模.我希望有一种更容易/更可靠的方式.
编辑:我尝试使用@media (-webkit-min-device-pixel-ratio:1)Chrome,Safari和Firefox 4 的查询,显然Webkit将属性视为一个恒定的设备像素到屏幕像素比率(不随缩放而变化),而Firefox 4将其视为设备像素与CSS像素比率(放大时会增加).因此在Firefox 4中,我可以使用二进制搜索发现CSS像素/设备像素比率,但不能使用Webkit.
我在Canvas中创建了一个小游戏,但我遇到了问题.将默认缩放设置为100%以外的某些用户无法看到整个游戏页面.
我试过使用这个CSS:
zoom: 100%;
Run Code Online (Sandbox Code Playgroud)
这个HTML
<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />
Run Code Online (Sandbox Code Playgroud)
这个JS:
style="zoom: 75%"
Run Code Online (Sandbox Code Playgroud)
任何想法如何以编程方式设置页面缩放?
我们在自助服务终端模式下使用Chrome,并且意外地用户使用最近添加的缩放缩放支持使应用程序变焦.然后他们认为他们已经打破了它并且干脆离开应用程序(以及随后的55英寸触摸屏)处于破碎状态.
现在唯一可行的工作就是停止2点以上触摸事件的事件传播.问题是我们不能在这种情况下做多点触控应用程序,如果你行动迅速,浏览器会在javascript之前做出反应.在我们的测试中,用户偶然发生了这种情况.
我做过Meta标签,它们不起作用.老实说,我希望我可以禁用铬缩放,但我无法找到一种方法来做到这一点.
如何阻止浏览器进行缩放?
如何在不考虑缩放级别的情况下"固定"浏览器窗口的左边缘(包括菜单,边框,标题等)?(这个问题解决了基本问题,但不考虑缩放.).
window.screenLeft或window.screenX在Chrome和Safari上运行正常,但这些使用IE6,IE8和Firefox报告"固定"值.
我认为我可以更可靠地获得屏幕尺寸,也许可以使用它或screen.deviceXDPI来确定缩放系数,但我不知道如何使用它来纠正位置.
(有些人可能想知道我为什么要这样做.这是因为培训网站在用户屏幕的右侧打开了一个浏览器窗口.浏览器使用脚本标签hack与我的应用程序通信.应用程序想要调整自身大小,使其完全适合浏览器窗口的左侧.)
编辑
我应该提到两件事:
我正在开发一个新的网站,它应该是"完美的" - 与ie6 +,ff,chrome,opera和safari兼容.
我使它与所有这些浏览器兼容但是我无法处理一个问题 - 当改变缩放时,所有布局都变得混乱.
示例摆弄问题:http: //jsfiddle.net/pdQrQ/1/
在Chrome(14.0.835),FF(7.0.1)和IE9中,当缩小时 - 右上角的框大小正在改变(至少它看起来像),然后它与下面的框没有正确对齐.
编辑:
我知道原因是什么 - 边界!
说明:每个浏览器上的缩放功能改变了div的宽度/高度而不是边框大小,因此它会导致这个毛刺/浮动.如果我删除边框一切正常perefct.
但我想使用边框,否则我的设计会更加丑陋.
我该怎么办?
谢谢!
我设计了一个页面,当浏览器缩放率为90%时,按钮看起来很好,但默认情况下,其他用户在浏览器中以100/125%+的比例查看它,这导致按钮和输入表单重叠.
因此,我希望在加载JSP页面时将缩放值设置为90%.
我该怎么做呢?进行任何此类设置后可以使页面不可缩放?或者有更好的解决方案吗?
在Internet Explorer 7中,某些属性(鼠标坐标)被视为物理属性,而其他属性则是逻辑(偏移).这基本上要求Web开发人员了解或计算缩放状态.在IE8版本中,所有属性都是合乎逻辑的
我正在尝试重新设计一些我在SO上的答案中找到的Javascript代码.但我想首先更好地理解它的语法.其大纲是:
(function (root, ns, factory) {
// some code
} (window, 'detectZoom', function() {
// some more code
}));
Run Code Online (Sandbox Code Playgroud)
见接受的答案在这篇文章的参考完整的代码.
我理解最终结果如何实现,但我不太清楚内部(...)块如何与第一个相关,或者它内部的逗号分隔列表告诉编译器.
谁能解释一下?谢谢.