浏览器默认改变字体大小解决方案

前言

  遇到个小坑,踩了一个多小时,真鸡儿难受。

  是这样的,在移动端字体大小设置了16px,结果到 iphone5 上显示的有大有小,很奇怪。开始的时候还以为是P标签的原因,查了半天文档...最后才发现是浏览器的默认行为。

正文

  在CSS中有  text-size-adjust  这样一个属性,这个属性允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准,使用时必须加上前缀。如下:

        -webkit-text-size-adjust: ;
        text-size-adjust: ;
        -moz-text-size-adjust: ;  

  因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了100%,他的文本大小会增加直到达到一个易读的大小,但是不会修改布局。 text-size-adjust   这个属性允许开发者去除或者修改这个浏览器默认行为,因为当网页设计已经处理小屏幕的宽度问题时不需要他。

  语法如下:

/* 文本不会放大 */
text-size-adjust: none;

/* 文本可能会被放大 */
text-size-adjust: auto;

/* 文本会被放大80% */
text-size-adjust: 80%;

/* 全局的值 */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

text-size-adjust   属性的值为 auto , none , 百分比。

  - none

   禁用浏览器的文本溢出算法。在老的基于webkit内核的桌面端浏览器,这将阻止用户将网页放大或缩小。

  -    auto

   启用 浏览器的文本溢出算法。该值用于取消先前使用CSS设置的none。

  - <percentage>

   启用 浏览器的文本溢出算法,具体用一个百分数来确定文本放大范围。

我的解决办法:

   body   {
        text-size-adjust: 100% !important;
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
    }
  //必须加上对应的前缀

需要注意的是这个属性并未写进标准,使用时 必须添加上对应的前缀,然后  这个属性只有在一些智能手机和平板电脑上使用,当然,这种情况多出在小屏幕的手机上,桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。 

更详细的内容请参考 MDN 文档。

  

原文地址:https://www.cnblogs.com/bfc0517/p/8358948.html

时间: 2024-10-07 20:45:49

浏览器默认改变字体大小解决方案的相关文章

手机端横竖屏切换,怎么做才能安卓浏览器及时改变字体大小

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>账号绑定</title><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta

响应式rem针对UC浏览器12号字体可行性解决方案

手机UC浏览器12号字体可行性解决方案 今天上班测试手机专题时候发现,UC浏览器去浏览到手机页面12号字体放大到16号字体大小,始终是改变我所写的样式为12号字体大小,但是苹果 saf 浏览器  还有小米自带浏览器或者国产手机都能正常显示12号字体,这个UC变态啊~~ 后来web群里有个同仁说美团移动端用的也是12px字体,瞅了眼,其实美团移动用的并非是12px而是rem字体. 那么,什么是rem字体?rem字体何处使用?为此我也查阅了下资料 「rem」是指根元素(root element,ht

解决系统改变字体大小的时候导致的界面布局混乱的问题

从android4.0起系统设置的”显示“提供设置字体大小的选项.这个设置直接会影响到所有sp为单位的字体适配,所以很多app在设置了系统字体后瞬间变得面目全非.下面是解决方案 Resources res = getResources(); Configuration config=new Configuration(); config.setToDefaults(); res.updateConfiguration(config,res.getDisplayMetrics() ); 虽然goo

葡萄城页面报表通过表达式来改变字体大小

如题,做报表时候,有时候要根据是否是合计行,来改变合计行的粗细,大小. 可以通过字体的表达式来实现: 表达式的通用写法:  =iif( Fields!YourFieldName.Value operator "Value to compare", "If condition is met, use this value.", "If not, use this one.") 如果满足条件(第一个参数),则执行第二个参数,否则执行最后一个参数 例如

eclipse如何改变字体大小

Windows >>perferences General>> appearance>>Colors and Fonts 点开之后,在Basic 下面找到Text Font 点击Edit 选择适合的字体大小,按确定.

iOS UILabel根据文本宽度改变字体大小

之前一直不知道有这样一个属性,看了这篇博文才知道 http://my.oschina.net/joanfen/blog/145184 myLabel.adjustsFontSizeToFitWidth = YES; //假设文字内容为@"曾在月光之下望烟花,曾共看夕阳渐降下",Label长度为200,则一行显示不下,若设置此属性为YES,则会降低字体大小,以显示全部内容.

stylish——一键为网页换肤,改变字体大小,去除广告

今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件 可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/ 应用商店找到安装即可 点击网站也可以进入官网进入网站后输入你想要换皮肤的网站 举个栗子:比如我想给GitHub换个皮肤 点击进去之后 因为我安装过了 所以这里是更新安装后打开GitHub就能看到效果了 炫酷的不要不要的 当然如果你觉得这些皮肤都不好看 你也可以自己写代码自定义任意网站的布局 颜色 字体大

手动--拖动条--改变字体大小

一个多月的加班,终于熬到头了,领导说下午休息一下,我就把自己工作中途写的一个简短的小demo拿出来,说是分享一下,其实还是有一些小bug,希望有人能找出,并给指错,一起进步,一起成长,想想这一个多月,过的又充实,又慌乱,希望一会会振作一些把,其他的不多说了,代码如下,自己实现效果! 实现思想: 三个div,当鼠标拖动小按钮的时候,计算出左边的div class='scroll' 的宽度不断的变化,而 设置的字体最大为50px, 拖动条的宽度为200px, 由此可见,当拖动的宽度为100px的时候

嵌入式Qt-4.8.6显示中文并且改变字体大小和应用自己制作的字体库

问题: QT4.8.6在移植到开发板上的时候,中文支持是必不可少的,如何让QT支持中文,如何制作QT支持的字体文件,如何使QT UI编辑器中的字号与开发板中的字号一致. 详解: 1>如何让QT支持中文  QT程序中指明的字体和字号在/opt/qt-4.8.6/lib/fonts目录下没有对应的字库文件时,QT会选择某一个存在的字库文件来显示:那么,如果你的系统中只有需要一种字体和字号,那么则可以将fonts目录下不需要的字库文件全部删掉,只保留这个需要的字体文件即可. 上面是一种很方便的做法,无