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

在中文版Chrome里面,网页CSS里所有小于12px的字体设置都无效,最终将显示12px。这样弄的本意可能

是好的,因为中文一旦小于12px,就变得不易阅读。

但中文版Chrome也会阅读英文网站啊!中文网页里面也会有英文的小字体设置需求啊!尤其是一些文字

部份的设计,不小实在不好看,影响整个排版的美观。

解决方案,添加一个私有属性到html选择器:

html{-webkit-text-size-adjust: none;}

顾名思义, 禁用Webkit内核浏览器的文字大小调整功能。

但是请注意以下几点

-webkit-text-size-adjust

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不要定义成可继承的或全局的

举个例子:(来自https://m.taobao.com/)

html {
    color: #000;
    background: #fff;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

这就是淘宝的使用 大家可以放心使用

时间: 2024-11-03 22:17:39

-webkit-text-size-adjust: none;该如何处理的相关文章

Normalize.css源代码分解

Normalize.css 与 CSS Reset 有什么区别? Normalize.css是一个轻量级的CSS跨浏览器解决方案,包括移动浏览器.它提供了一套默认的样式,使得元素在大部分浏览器中具有相同的外观. Normalize.css基于最新的HTML5规范,相比较传统的css reset更具现代性. Normalize.css本文分解的版本是2.1.3,代码和注释总共406行. reset 的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性.例如 yui3 res

Normalize [ 浏览器渲染格式化 ]

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-tex

关于Normalize.css

之前做Bootstrap4的sharing时就了解过这个东西,刚好最近要用到,就深入的研究了一下. 简单点说,Normalize.css就是个CSS RESET(样式重置)的文件. 何为CSS RESET? *{ padding: 0; margin: 0; } 上面便是一个最简单的CSS RESET,而在实际的重构中,重置样式远远没有这么简单.一般的CSS RESET会如下. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fiel

移动端公用样式一

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-tex

pure.css

注释中address是纠正的意思  等价于correct/*! Pure v0.5.0 Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. https://github.com/yui/pure/blob/master/LICENSE.md */ /*! normalize.css v1.1.3 | MIT License | git.io/normalize Copyright (c)

web设计之无懈可击

无懈可击的web设计旨在尽可能地考虑页面元素在各个情况下都能够呈现最好的效果. 1. 思路总览 2. 灵活的文字 3. 可伸缩的导航栏 4. 可扩展的行 5. 自由的框式组件 6. 图片/标题/说明文字布局 7. 页面缺失图片或CSS的情况下仍然易写 8. 数据表格内容样式分离 9. 响应式布局           1. 思路总览 核心思想:结构和样式分离 HTML与CSS 只有充分将页面核心内容和外观设计相分离而获得的灵活性,才能顺利构建出能够满足每个web用户需要的最佳设计方案. 核心要求:

样式表的重置

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-tex

reset css normalize css

@charset "uft-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td {  padding: 0;  margin: 0; } html { font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif; text-shadow: #000 0px 0px 0px; } ul,

特效代码

效果十分好看 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 3D正方体旋转动画演示地址</title> <style> /*! normalize.css v2.1.2 | MIT License | git.io/normalize */ /* ==============================

[Bootstrap 源码]——bootstrap源码之初始化

bootstrap源码之初始化 我们先来分析normalize.less编译后的源码,我们知道normalize.css是一个专门将不同浏览器的默认css特性设置为统一效果的css库,它和reset.css还是有区别的,normalize.css并不是简单的重置了所有的样式,而是有针对的修改,同时也保留了标签的语义化. 技能一: html { font-family: sans-serif; -webkit-text-size-adjust: 100%; //防止IOS系统方向改变(特别是手持设