2013-07-21 71 views
0

我正在一个网站上看起来应该在每个设备上几乎相同。即笔记本电脑,个人电脑,ipad,iphones和其他智能手机。增加智能手机和iPhone上网站的字体大小

我使用的是纯javascript的fittext.js,以根据用户的屏幕分辨率减少/增加网站上的字体大小。

但是,在iPhone等设备上字体非常小!

我该如何在iPhone和其他智能手机上增加一点字体大小?

这是javascript代码我使用:

fittext.js

(function(){ 
    var css = function (el, prop) { 
    return window.getComputedStyle ? getComputedStyle(el).getPropertyValue(prop) : el.currentStyle[prop]; 
    }; 

    var addEvent = function (el, type, fn) { 
    if (el.addEventListener) 
     el.addEventListener(type, fn, false); 
     else 
      el.attachEvent('on'+type, fn); 
    }; 

    window.fitText = function (el, kompressor) { 

    var settings = { 
     'minFontSize' : -1/0, 
     'maxFontSize' : 1/0 
    }; 

    var fit = function (el) { 
     var compressor = kompressor || 1; 

     var resizer = function() { 
     el.style.fontSize = Math.max(Math.min(el.clientWidth/(compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px'; 
     }; 

     // Call once to set. 
     resizer(); 

     // Bind events 
     // If you have any js library which support Events, replace this part 
     // and remove addEvent function (or use original jQuery version) 
     addEvent(window, 'resize', resizer); 
    }; 

    if (el.length) 
     for(var i=0; i<el.length; i++) 
     fit(el[i]); 
    else 
     fit(el); 

    // return set of elements 
    return el; 
    }; 
})(); 

,这是在我的HTML页面:

<script src="fittext.js"></script> 
<script type="text/javascript"> 
    fitText(document.getElementById('fittext'), 2.9) 
</script> 

回答

2

Fittext的建议使用说它不该”用于信息段落。对于移动网站,确保您有移动视口集,然后更改较小设备的字体大小的最简单方法是使用媒体查询。

+0

+1对此 - 一般来说,您应该追求基于CSS /媒体查询的方法。这是这里工作的正确工具。 – founddrama

+0

好的,谢谢,我想你是对的。 –