Il y a une autre option:
Detect la taille de la police de l'utilisateur en utilisant le script suivant: http://www.alistapart.com/articles/fontresizing/
Ensuite, modifiez un conteneur div dans " em s "pour compenser la taille de l'utilisateur. Par exemple, si la taille de la police de l'utilisateur est de 22 et la base de 20, faites en sorte que votre conteneur div ait une taille de police de 20/22 (c'est-à-dire 22 * (20/22) = 20).:)
Remarque: La raison pour laquelle vous auriez besoin d'un conteneur div est que votre écouteur d'événements surveille les modifications de taille de police apportées au corps.
(Cette réponse sera probablement mécontenter certains experts en utilisabilité Désolé pour ces personnes que vous avez de bons points, mais une réponse est encore une réponse:... P)
PS. Je pense que je ferais mieux d'attacher mon code d'implémentation juste pour prouver que cela fonctionne. Je n'ai pas modifié ce code pour une application globale. Il est copié et collé ... attention aux choses telles que le remplacement de mon IE conditionnel (qui utilise des classes CSS ajoutées dynamiquement) avec des conditionnelles de détection de navigateur conventionnel (par exemple).
Il est long, mais tout le nécessaire:
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);
}
D'accord. Briser intentionnellement une taille de police accrue est une mauvaise idée. Si votre utilisateur navigue avec une taille de police accrue, c'est probablement parce qu'ils doivent le faire. Le seul cas où cela pourrait être correct est si vous utilisez une taille de pixel énorme, auquel cas vous pouvez aller avec (2) en utilisant des images. –
Je ne dirais même pas que ça va avec les images. Utilisez une réinitialisation css, trouvez une taille de police agréable et lisible et utilisez-la. Toute personne qui va augmenter la taille de la police veut lire le contenu, pas voir si votre site se brise. –