How reliable a method is this to detect zoom % on iPhone
// Init
var initialWidth = window.innerWidth;
// Called when zoomed in
function handleResize(){
// Viewport dimension, this is affected by zoom
var viewportwidth = window.innerWidth;
var zoomAmount = initialWidth/viewportwidth;
$('#lol').html('<p>Your viewport width is '+viewportwidth+'<br />Your native width is ' + initialWidth + '<br />Total zoom is ' + zoomAmount + '</p>');
}
Then in the body:
<body onresize="handleResize()">
<div id="lol" style="font-size:30px;"></div>
It seems to be accurate within +-7% on my MobiOne iPhone simulator, but I don't have a real iPhone to test this on. Is thi开发者_开发知识库s a good solution, or am I going to run into problems later?
The main issue is if the page loads pre-zoomed in then the %'s get messed up, is it ever possible to open a web page on an iPhone zoomed in or will it always default to 100%?
I can't really comment on how effective this technique will be, however, I would suggest that you probably shouldn't even try. Generally speaking trying to force or adapt to zoom levels isn't a great idea - there are a great variety of smart-phone devices, and it is very unlikely that you will be able to reliably detect / adjust the zoom levels on all of them. Instead I would argue that your time would be better spent trying to make your site look good at any zoom level.
加载中,请稍侯......
精彩评论