增加智能手机和iPhone上网站的字体大小

杰西·乔丹(Jessy Jordan)

我在一个网站上工作,该网站在每台设备上看起来都差不多。即笔记本电脑,PC,ipad,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>
罗伯·庞德

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

通过PC或其他智能手机远程启动和停止Android应用

来自分类Dev

检测平板电脑和智能手机

来自分类Dev

平板电脑/智能手机和触摸屏计算机不同

来自分类Dev

使用libGDX访问智能手机的相机

来自分类Dev

我的联系表单与智能手机和PC的不同视图

来自分类Dev

OOP设计与智能手机的性能

来自分类Dev

电脑和智能手机/平板电脑上的图像颜色不同

来自分类Dev

与Android智能手机同步日历和通讯录

来自分类Dev

智能手机中的数据链路层和物理层设备

来自分类Dev

React网站按钮和输入在智能手机上不起作用

来自分类Dev

获取智能手机的标识符

来自分类Dev

如何使我的网站响应智能手机

来自分类Dev

如何安装智能手机以恢复文件

来自分类Dev

与Android智能手机同步日历和通讯录

来自分类Dev

比较Windows文件夹和智能手机文件夹

来自分类Dev

通过PC或其他智能手机远程启动和停止Android应用

来自分类Dev

iPhone(智能手机)CSS RWD渲染不起作用

来自分类Dev

大屏幕智能手机的RWD失败

来自分类Dev

与iPhone /智能手机共享RAM?

来自分类Dev

从智能手机下载照片

来自分类Dev

如果手机已锁定,则将智能手机连接到PC

来自分类Dev

如何连接智能手机和PC进行Java编程?

来自分类Dev

仅为智能手机加载不同的JavaScript

来自分类Dev

压缩来自智能手机的视频

来自分类Dev

在 Foundation 6 中增加手机的字体大小

来自分类Dev

ExtJS 4 智能手机尺寸

来自分类Dev

通过智能手机 OnePlus 3T 在网站上的字体大小和 img 高度太大

来自分类Dev

智能手机和 PC 中不同宽度的响应容器 - 引导程序

来自分类Dev

CSS 媒体智能手机

Related 相关文章

热门标签

归档