Есть еще один вариант:
Определите размер шрифта пользователя, используя следующий скрипт: http://www.alistapart.com/articles/fontresizing/
Затем настройте div контейнера в "ems", чтобы компенсировать размер пользователя.
Например, если размер шрифта пользователя равен 22, а base равен 20, тогда сделайте так, чтобы ваш контейнер div имел размер шрифта 20/22 (т.е. 22 * (20/22) = 20). :)
Примечание. Причина, по которой вам нужен контейнер div, заключается в том, что ваш прослушиватель событий будет следить за изменениями размера шрифта в теле.
(Этот ответ, вероятно, разозлит некоторых экспертов по юзабилити. Извините этих людей. У вас есть хорошие моменты, но ответ по-прежнему является ответом.: P)
PS. Я полагаю, что лучше всего присоединить свой код реализации, чтобы доказать, что он работает. Я не редактировал этот код для глобального применения. Он скопирован и вставлен ... обратите внимание на такие вещи, как замена моего условного IE (который использует динамически добавленные классы CSS) на условные браузерные условные выражения (например).
Это долго, но все необходимое:
updateBaseFontSize : function(fontSize,reloadBool){
/*Format 1 is fed from the plug; format2 is the body size equiv
*examples:
*Frmt 1 (all/IE) | Frmt 2 (all/IE)
*20/18 | 16px/16px
*21/21 | 17.6px/19px
*22/23 | 19.2px/22px
*
*Purpose of updateBaseFontSize is:
* 1. convert format 1 figures to format 2
* 2. modify the all containing div 'fontbodyreadjust'
* to compensate for the new user defined body font size
*/
var format1Base;
var format1Size = fontSize; //equals new size in pixels
var reloadPage = reloadBool; //prevents reload on 1st visit
var baseConverter;
var changeConverter;
if ($('body').hasClass('browserIE')) {
format1Base = 19; //expected base size value for IE
baseConverter=16/19; //converts from format 1 to 2 for IE
changeConverter=1.5; //ditto for the difference from base size for IE
} else {
format1Base = 20;//expected base size value for all other browsers
baseConverter=16/20; //converts from format 1 to 2 for all others
changeConverter=1.6; //ditto for the difference from base size for all others
}
//Find modifiedSize, how much to compensate for the new body size
var format2Base = format1Base * baseConverter;
var format2SizeChange = (format1Size-format1Base)*changeConverter;
var format2NewSize = format2SizeChange + format2Base;
var modifiedSize = format2Base/format2NewSize;
//Allow text resizing for shrinking text and very very large text
//Only works for safari. meant to prevent odd behavior at math extremes
if ((format2NewSize >= format2Base)&&(modifiedSize>.6)){
$('#fontbodyreadjust').css('font-size',modifiedSize+'em');
}
//reloadPage boolean in place so that reload doesn't occur on first visit
if (reloadPage){
window.location.reload()
}
},
initHome : function(){
// UNHIDE HOME PAGE CONTENT AFTER IT'S LOADED. OTHERWISE, LAYERED AND MESSY
$('#slider').css('display', 'block');
// PREVENT VARIOUS USER BROWSER-FONT RESIZE SCENARIOS
// Note: irrelevant for browsers that zoom all elements simultaneously
window.initFontResizeDetector = function(){
var iBase = TextResizeDetector.addEventListener(onFontResize,null);
//Don't run the updateBaseFontSize if font size is not larger than usual
if (iBase>20){
var reloadBoolean = false;
window.updateBaseFontSize(iBase,reloadBoolean);
}
}
//id of element to check for and insert control
TextResizeDetector.TARGET_ELEMENT_ID = 'bodyContent';
//function to call once TextResizeDetector has init'd
TextResizeDetector.USER_INIT_FUNC = window.initFontResizeDetector;
window.onFontResize = function(e,args) {
var iSize = args[0].iSize; //get new user defined size
// var iDelta = args[0].iDelta; //get new user defined size
// var iBase = args[0].iBase; //get new user defined size
var reloadBoolean = true;
// console.log(iSize,iDelta,iBase);
window.updateBaseFontSize(iSize,reloadBoolean);
}