text-size-adjust（只用于移动端）

最新推荐文章于 2025-04-09 14:30:00 发布

转载最新推荐文章于 2025-04-09 14:30:00 发布 · 1k 阅读

文章标签：

#CSS #text-size-adjust

移动web 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个CSS技巧，通过-webkit-text-size-adjust属性实现文本大小在移动设备上的自适应调整。此属性仅在移动设备上生效，并且需要配合metaviewport使用。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS参考手册</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<style>
.demo1 {
	-webkit-text-size-adjust: auto;
}
</style>
</head>
<body>
	<div class="demo1">
		<p>请在移动设备上查看本例，设备尺寸的变化将会使得文本大小变化</p>
	</div>
</body>
</html>

摘录于：《CSS参考手册》

注：

1、该属性只在移动设备上生效；

2、如果你的页面没有定义meta viewport，此属性定义将无效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

spfLinux

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

移动端热点问题

MingL520的博客

05-31

693

像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。

一些鲜为人知的的CSS3属性

02-04

1052

webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过JavaScript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可。示例：设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5); 浏览器支持: 只有iO

参与评论您还未登录，请先登录后发表或查看评论

css3中-webkit-text-size-adjust详解

weixin_30765577的博客

05-14

382

1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;} 2、-webkit-text-size-adjust放在body上会导致页面缩放失效 3、body会继承定义在html的样式 4、用-webkit-text-size-adjust不要定义成可继承的或全局的 ...

CSS 的text-size-adjust属性

读心悦

08-21

1458

属性在CSS中用于控制用户是否可以调整网页中文字的字体大小。这个属性主要针对移动设备上的浏览器，尤其是那些允许用户通过捏合（pinch）手势来缩放整个页面的浏览器。

text-size-adjust属性

nunumaymax的博客

12-15

2507

当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器在渲染网页时可能会有不同。这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。注意：对于这个属性，不同浏览器有不同的行为和语法，所以需要在想要应用的浏览器加上属性前缀。

text-size-adjust

kilito_01的博客

11-16

2296

text-size-adjust 的用法 text-size-adjust会根据设备尺寸而自动调整文字大小，这对于前端效果并不一定是需要的，所以我们一般会修改这个属性，将字体大写严格设置为我们定义的大小 html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } 或者 html { -ms-text-size-adjust:

前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）

li3123537691的博客

08-13

708

一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。

【前端面试题】—21道有关移动端的面试题

油墨香^-^的博客

05-30

4453

前端发展到今天，移动端的流量已经超越了PC端。比如对绝大部分人来说，每天使用手机上网的时间要远高于使用笔记本电脑、计算机的上网时间。因此移动端变得越来越重要。每个人的手机屏幕大小不同、系统不同，因此移动端屏幕的响应式适配、移动端兼容性、浏览器的操作Bug等是移动端部分的面试题主要考察的内容。 1、在移动端，单击穿透是什么？单击穿透现象有3种。单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。页面单击穿透问题：如果按钮下面恰妤是

41、web前端开发之Vue3保姆教程(五项目实战)

qq_22910257的博客

04-09

910

web前端开发之vue3 实战案例

-webkit-text-size-adjust

nuptsv_ice的专栏

06-03

2608

1、当样式表里font-size 2、-webkit-text-size-adjust放在body上会导致页面缩放失效 3、body会继承定义在html的样式 4、用-webkit-text-size-adjust不要定义成可继承的或全局的苹果移动设备上会识别，用于保证文字大小。写页面的应该都知道Chrome浏览器默认情况下的字体最小为

text-size-adjust用法

weixin_43540912的博客

11-08

2250

前提：使用前需要加上兼容写法用法：在移动端为防止字体变大，添加-text-size-adjust属性为100%可防止字体变大放在body会导致页面缩放失效可以使body继承html的样式 ...

-webkit-text-size-adjust: none;该如何处理

weixin_30932215的博客

08-27

341

在中文版Chrome里面，网页CSS里所有小于12px的字体设置都无效，最终将显示12px。这样弄的本意可能是好的，因为中文一旦小于12px，就变得不易阅读。但中文版Chrome也会阅读英文网站啊！中文网页里面也会有英文的小字体设置需求啊！尤其是一些文字部份的设计，不小实在不好看，影响整个排版的美观。解决方案，添加一个私有属性到html选择器: html{-webki...

网页字体缩放样式：-webkit-text-size-adjust的用法

sinat_36841379的博客

04-13

2410

在Normalize.css看到了-webkit-text-size-adjust，以前也没有见过这个属性，所以我就在网上找了一点资料来记录一下，以防忘记！中文版的chrome浏览器中的当将字体设置为小于12px的时候，chrome浏览器往往不会显示比 12px还要小的字，因为该浏览器中默认的字体最小是12px，所以当你想设置为10px的时候，该浏览器页面中还是会显示的是

Android Chrome忽略-webkit-text-size-adjust：none属性缩小文字时，文字会被缩放

dituirenwu的博客

02-26

458

如何解决Android Chrome忽略-webkit-text-size-adjust：none属性缩小文字时，文字会被缩放？刚刚发现了一种解决方法。在文本的父元素上设置最大高度，使其比以前显示的要大得多。例如， This is some text that is appearing blown up and ridiculous on Chrome Mobile. p.intro { max-...

Jaspersoft Studio 中，（Text Adjust）属性设置为StretchHeight

weixin_49238911的博客

06-24

3104

Jaspersoft Studio 中，（Text Adjust）属性设置为StretchHeight

-ms-text-size-adjust: 100%;