简体   繁体   中英

increase font size in website on smartphones and iPhones

I am working on a site that should look almost the same on every device. ie laptop, PC, ipads, iphones and other smartphones.

I am using fittext.js which is pure javascript in order to reduce/increase the font size on the website according to the user's screen resolution.

however, the fonts are very small on devices such as iphones!

how can i increase the font size a bit more on iphones and other smart phones?

this is the javascript code i am using:

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;
  };
})();

and this is in my HTML page:

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

Fittext's suggested use says that it shouldn't be used for paragraphs of information. For mobile sites ensure you have a mobile viewport set, and then the easiest way to change font size for smaller devices is to use media queries.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM