是否有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(出现在视口中)？
(关于Firefox的问题)
如何在所有现代浏览器中检测页面缩放级别？虽然这个线程告诉我如何在IE7和IE8中做到这一点,但我找不到一个好的跨浏览器解决方案.
Firefox存储页面缩放级别以供将来访问.在第一页加载时,我能够获得缩放级别吗？我读到它的某个地方在页面加载后发生缩放变化时有效.
有没有办法陷阱'zoom'事件？
我需要这个,因为我的一些计算是基于像素的,并且在缩放时它们可能会波动.
由@tfl给出的修改样本
此页面在缩放时提醒不同的高度值.[的jsfiddle]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
</head>
<body>
<div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie …我正在使用锤子进行拖动,并且在加载其他东西时它会变得不稳定,正如此警告消息告诉我的那样.
由于主线程忙,"touchstart"输入事件的处理延迟了X ms.考虑将事件处理程序标记为"被动"以使页面更具响应性.
所以我试着像这样向听众添加"被动"
Hammer(element[0]).on("touchstart", function(ev) {
// stuff
}, {
passive: true
});
但我仍然收到这个警告.
对于类似地图的工具,我想禁用浏览器缩放功能.(我知道这通常是一个坏主意,但对于某些特定的网站,它是必要的).
我通过听键盘快捷键CTRL +/ CTRL -添加e.preventDefault()等来成功完成它.
但这并不妨碍从浏览器的缩放菜单更改缩放.
我试过了:
使用CSS: zoom: reset; 它适用于Chrome(请参阅此页面了解一个工作示例)但它在Firefox上根本不起作用.
在各种问题/答案中,我也发现了
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
但这似乎仅适用于移动设备.
如何防止缩放跨浏览器？
我需要一些帮助.我正在尝试在移动网页上工作.我正在尝试做的是当用户进行放大/缩小操作时"捕获".也就是说,当他们将两根手指放在屏幕上并将他们的手指分开或闭合在一起时.我看着jquery mobile并没有看到它.
具体来说,我可以将javascript函数附加到移动设备中的捏合/缩放事件吗？
任何帮助将不胜感激.
我正试图在移动浏览器上解决css"position:fixed"属性的问题.我有一个固定的div:
<div id="logo">
...other content here...
</div>
用css:
#logo{
position: fixed;
-webkit-backface-visibility: hidden;
bottom: 100px;
right: 0px;
width: 32px;
height: 32px;
}
因此,通常行为完全是所需的行为,div位置始终位于窗口的右下角,与滚动位置无关.我的问题是,在移动浏览器上,当用户缩放页面时,在某个缩放级别之后,div位置是错误的(有时div会从窗口中消失).
我知道移动浏览器不支持固定位置,但我想知道是否有一些解决方法.我尝试使用这个js代码onScroll事件:
window.addEventListener('scroll', function(e){
drag.style['-webkit-transform'] = 'scale(' +window.innerWidth/document.documentElement.clientWidth + ')';\\I want to avoid zoom on this element
var r = logo.getBoundingClientRect();
var w = window.innerWidth;
var h = window.innerHeight;
if(r.right != w){
rOff = r.right - w;
logo.style.right = rOff;
}
if(r.top+132 != h){\
tOff = r.top + 132 - h;
logo.style.bottom = tOff;
}
});
不幸的是,代码似乎回到了错误的位置.
有人有任何提示吗？
我尝试使用以下元视图端口标记来阻止浏览器缩放:
<meta content='width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi' name='viewport' />
但这不起作用.我知道这是可能的,因为我的缩放在这个网站上被阻止:futurism.xyz
该网站的视口标记是这样的:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
我做错了什么或错过了什么？
如果我有一个像img标签
<img src="example.png" />
我通过它设置它
myImg.src = "example.png";
再次使用相同的值,这将是一个无操作,还是浏览器会不必要地重绘图像？(我主要对IE6-8,FF3.x,Safari 4-5和Chrome的行为感兴趣.)
我需要一次更改许多(数百个)图像,并且手动比较src属性可能有点多余 - 我认为,浏览器已经为我做了这个？
是否可以禁用Firefox中的浏览器内全页缩放(通过Ctrl +激活)以获取网页？对于网页中的某些元素怎么样？我只是注意到有时元素在缩放时看起来很奇怪,而且完全禁用这些元素的缩放可能会很好.
注意:我知道有几种方法可以找到缩放级别,但这确实是想积极解决它(这可能不是一个好主意).