2012年3月20日 星期二

Mobile devices screen size

jquery zoom 解決不同 mobile devices 的 screen 問題

$( document ).ready( function() {
var $body = $('body'); //Cache this for performance

var setBodyScale = function() {
var scaleSource = $body.width(),
scaleFactor = 0.35,
maxScale = 600,
minScale = 30; //Tweak these values to taste

var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

$('body').css('font-size', fontSize + '%');
}

$(window).resize(function(){
setBodyScale();
});

//Fire it when the page first loads:
setBodyScale();
});



var designWidth = 480; // zoom to fit this ratio
var designHeight = 762; // not 800 b/c top bar is 38 pixels tall
var scaleChange = 1; // % change in scale from above #s

function zoomScreen() {
var docWidth = window.outerWidth;
var docHeight = window.outerHeight;

if (docWidth != designWidth) {
var scaleX = docWidth / designWidth;
var scaleY = docHeight / designHeight;
if (scaleX < scaleY) {
$('body').css('zoom', scaleX);
scaleChange = scaleX;
} else {
$('body').css('zoom', scaleY);
scaleChange = scaleY;
}
}
}