detect-zoom
detect-zoom copied to clipboard
tombigel
Not working on latest Webkit Nightlies
In the latest webkit nightlies the zoom level is not detected. This is possibly due to the fact that "document.body.style.webkitTextSizeAdjust" returns undefined (not a string) on the webkit nightly.
My Webkit Nightly (Safari) version: 6.0.1 (8536.26.14, 537+)
Operating system: Os X
Adding this would seem to help:
//WebKit
else if (typeof document.body.style.webkitTextSizeAdjust === 'string') {
func = webkit;
}
//New WebKit Nightlies
else if (typeof document.body.style.webkitTransform === 'string') {
func = opera11;
}
//Opera
else if (navigator.userAgent.indexOf('Opera') >= 0) {
func = opera11;
}
Thank you, but I'm not testing against nightlies. It's impossible to track all Moz/Webkit/Opera nightlies and their short living bugs and new features.
I will have of course to check periodically to se if any of the prefixed properties I'm using have been removed or changed.
Ok. I would assume this to break fairly soon in Safari/Chrome as well, but let's see.
Well well... https://bugs.webkit.org/show_bug.cgi?id=56543
Need to find another way. Question is, should I use some other feature detection, or should I just sniff the user agent since it's becoming to stupid to track all the versions of everything...?
My coworker and I dynamically created a svg element and check its currentScale property. It works great on Chrome and likely most browsers too. It works sometimes on FF if the zoom text only feature is turned off.
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
@PoyangLiu I wrote this fiddle - http://jsfiddle.net/tombigel/HzQwr/ Scale is always 1.
Am I doing something wrong?
Your window.out definition should be in the body tag or after window is loaded. I couldn't get your fiddle to work even with the various options though. Maybe JSFiddle's options (eg. OnLoad) are not working?
<!DOCTYPE html>
<html >
<head>
<script>
function getScale() {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var scale = svg.currentScale;
document.body.removeChild(svg);
scale = Math.round(scale * 100) / 100;
return scale;
};
function updateScale() {
document.getElementById('out').innerHTML = getScale();
};
window.addEventListener('resize', function (e) {
updateScale();
});
window.addEventListener('load', function (e) {
updateScale();
});
</script>
</head>
<body>
Scale: <div id="out">Scale</div><br>
</body>
</html>
Ok, something in jsFiddle breaking it, you html works for me.
Do you have a retina mac around to see what is the initial scale on retina displays?
1.0.4 has stopped working in Chrome Betas, only returns 1 for detectZoom.device(). I can't be 100% sure when it worked last, but within 2 weeks certainly, and probably last week as well.
My exact version as of now is Version 27.0.1453.56 beta-m, I forgot to note the version before that also had the same problem.
Combined the info in above comment with 1.0.4 and changed the webkit function to:
var webkit = function () {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var zoom = svg.currentScale;
document.body.removeChild(svg);
zoom = Math.round(zoom * 100) / 100;
return {
zoom: zoom,
devicePxPerCssPx: zoom * devicePixelRatio()
};
};
This works, where the <div> implementation does not.
Note however that I have not been able to test this in older webkit!
There's always something.... Just discover that this won't work if the svg is within an iframe because the scale of the svg is relative of the frame that encloses it. TestScale.htm is the code I pasted in the previous comment.
<!DOCTYPE html>
<html >
<head>
</head>
<body>
<iframe id="myFrame" src="TestScale.htm"></iframe>
</body>
</html>