修复Mobile Safari(iPhone)上的字体大小问题,其中文本呈现不一致而某些字体比其他字体大？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

移动Web 开发中的一些前端知识收集汇总

" content="black" /> mobile-web-app-title" content="测试APP"> 第一个meta标签是iphone设备中的safari...1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式，其值有三个：default、black...:none;outline:none;} iOS 浏览器横屏时会重置字体大小的问题 iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决ios上的问题，但桌面版...safari的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。...;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ 其他CSS的杂项 -webkit-tap-highlight-color: transparent; /*Mobile上点击链接高亮的时候设置颜色为透明

3.9K5 0

Normalize.css ——CSS Reset的友好替代品

============================================================= */ /* * 校正‘outline’在Chrome和其他浏览器间的不一致...* 校正IE 8/9， Safari 5 和 Chrome中样式不呈现的问题 */ abbr[title] { border-bottom: 1px dotted...font-weight: bold; } /* * 校正 Safari 5 和 Chrome 中样式不呈现的问题 */ dfn { font-style...*/ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* * 校正所有浏览器中易变且不一致的字体大小...更正所有浏览器中字体不继承的问题 * 2. 更正所有浏览器中字号不继承的问题 * 3.

2.3K9 0

您找到你想要的搜索结果了吗？

是的

没有找到

移动Web学习笔记

-webkit-text-size-adjust: 100% 解释：在 Chrome 浏览器中只能设置大于或等于 12px 的字体大小，当设置了小于 12px 的字体大小时，浏览器按照 12px 的字体大小渲染字体...5. rel=”apple-touch-icon” 解释：在iPhone, iPad上的safari浏览器中有个将网站添加到主屏幕上的按钮，当网站设置了rel=”apple-touch-icon属性...，则子元素的字体大小为 16px X 2em = 32px 当em作为其他属性单位时，代表自身字体大小的倍数例如：一个元素的font-size: 16px 如果该元素的line-height: 2em...mobile-web-app-capable" content="yes"> 解释：启用webapp的全屏模式，删除iPad或者iPhone上默认的工具栏和菜单栏 22...mobile-web-app-status-bar-style" content="black"> 解释：iphone的私有标签，它用于给iphone上的safari

1K3 0

移动开发实用

-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 mobile-web-app-status-bar-style...以下是历史原因，来源其他人的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放 (double tap to...zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态...什么是Retina 显示屏，带来了什么问题 retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4...important;} 最好的解决方案：整个页面用rem或者百分比布局消除transition闪屏网络都是这么写的，但我并没有测试出来 .css{ /*设置内嵌的元素在 3D 空间如何呈现：

6.5K3 0

移动webapp前端开发小结

虽然viewport meta 标记现在很常见，但在过去，某些浏览器使用其他 meta 标记（如 HandheldFriendly 和 MobileOptimized）来实现相同的目的。..."> 三、响应式设计，自适应多分辨率的移动设备如果我们针对不同分辨率的移动设备匹配同一套CSS样式（比如：字体、图片大小等），最终显示的结果很可能某些分辨率上的效果不错、而其他分辨率的显示效果则会千差万别...所以，我们需要为不同分辨率的设备，匹配不同的样式。如果有web端工作经验，应该不难想到自适应布局，即在整体布局上采用百分比，而不写具体的px值。除了整体布局，我们还需要考虑字体、图片/图标大小。...了解了媒体查询，我们最先想到的是针对不同分辨率的设备，设置不同的字体大小、图片图标的大小。设置字体大小问题不大，但是一个网站有很多个页面，图片、图标的个数一般有不少。...因为兼容性问题，CSS3提供的弹性盒子布局 display:box 在web端的使用受限，但到了移动端弹性盒子布局确是一大利器，让人爱不释手。

1.3K2 0

文本排版设计告诉你

如何在手机有限的屏幕上呈现清晰的UI和UX？这里太多因素需要考虑，文本排版设计就是其中不可或缺的一部分。今天，我将从文本排版设计角度出发，谈谈如何实现完美的手机UI界面。...通常，大文本需要更少的字距，而稀疏的文本要求更宽的字距。 ? 3. 行长行长也是手机排版中的一个重要尺度要求。文本行的长度可能会影响整个排版。桌面屏幕的行长势必会超出手机屏幕边框。...对比度在手机屏幕上，文本数量远远小于Web界面，于是同等设置的对比值，在手机界面上会放大。手机文本排版设计的对比度问题，最大的原则就是削弱对比。...如果你在小屏幕上使用环境光度和短字体，不但没有帮到用户，还会让他们产生头疼晕眩的感觉。颜色选择对对比度影响很大，更糟的例子，红色文字与绿色背景。此外，字体大小也是对比度的一大考虑。...左中右三种方式都可以保留边距，而两端对齐在左右两侧都没有边距。此外，两端对齐文本会导致不一致的字间距，最坏的情况还会导致一行中的几个单词紧紧凑在一起。对于文本主体而言，两端对齐是不明智的选择。

2.6K7 0

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

我们通常说的H5手机适配也就是指的这两个维度：适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素适配不同像素密度，也就是适配不同屏幕下 dpr 不一致导致的一些问题适配不同屏幕大小适配不同屏幕大小...font size of the element）的区别是，em 是根据其父元素的字体大小来设置，而 rem 是根据网页的跟元素（html）来设置字体大小。...通常可以，有一些通用的优化手段：消除多余的图像资源尽可能利用 CSS3\SVG 矢量图像替代某些光栅图像谨慎使用字体图标，使用网页字体取代在图像中进行文本编码选择正确的图片格式为不同 DPR...其次，很多早期的文章规范都建议不要使用奇数级单位来定义字体大小（如 13px，15px...），容易在一些低端设备上造成字体模糊，出现锯齿。...完整的一个字体资源实在太大了，所以我们应该尽可能的使用用户设备上已有的字体，而不是额外去下载字体资源，从而使加载时间明显加快。

3.1K3 2

为什么你永远不应该在CSS中使用px来设置字体大小

一个例子：iPhone 14 Pro 上的像素非常微小，16px 在字面上的设备像素大小大约相当于2pt字号的印刷字体大小。好在浏览器为我们缩放了它们！...继续讲述不严格相关但仍然有趣的小知识： "em" 是一个排版术语，实际上比计算机早了几十年。在排版上，一个 em 等于当前字体大小。...em 和 % 单位在其他情况下并不总是等价的；例如， width: 1em 和 width: 100% 很可能会非常不同，因为此时百分比是基于父容器的宽度而不是其字体大小。...虽然我认为如果你选择这条路，你可能会没事，但我仍然认为 px 有其存在的意义。我们知道当用户调整字体大小时 px 值不会改变，这意味着像素单位实际上是某些美学元素的不错选择。...如果用户设置了非常大的字体大小，则可能不是这种情况，将媒体查询设置为 rem 而不是 px 可以帮助我们避免这种假设并响应用户的偏好。我在这个网站上遇到了这个问题；我把所有的断点都设置在 px 上。

1.8K2 0

「译」前端项目中常见的 CSS 问题

---- 在浏览器中实现用户界面时，最好是尽可能地减小这些差异和问题，以便 UI 呈现出预测的样子。记住所有的这些差异是很困难的，所以我列举了一系列常见问题以及解决方案。...透明渐变当使用透明起点和终点添加渐变的时候，在 Safari 下会呈现一片漆黑。这是因为 Safari 无法识别关键字 transparent。...交互式 HTML 元素的字体不生效给整个文档设置字体的时候，字体并不会应用于诸如 input， button select 和 textarea 这些元素上。...要修复这个问题，直接设置字体属性： input, button, select, textarea { font-family: your-awesome-font-name; } 16....压缩或拉伸图片用 CSS 调整一张图片的大小时，如果纵横比与图片的宽高不一致，则图片会被压缩或拉伸。解决方法很简单：使用 CSS 的 object-fit。

2.2K1 0

网页中内嵌字体

如果用户机器上没有这种字体，那就会变成默认的字体。所以，为了保证可以在每一台机器上都能显示，把一款字体嵌进网页是一个不错的选择。...+,Opera10+,iOS Mobile Safari4.2+ OpenType(.otf)格式： .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能...,支持这种字体的浏览器有Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+ Web Open Font Format...IE4+ SVG(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2...font-size：设置文本字体大小。 src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。

4K7 0

📚一站式解决：H5开发全攻略，看这篇让你省时又省力

属性，可以阻止用户在旋转屏幕时浏览器自动调整字体大小。...select { direction: rtl; } ⭐️⭐️修复点击无效在苹果系统上，有些元素无法触发click事件。通过声明cursor: pointer属性，可以解决这个问题。...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题现象在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...body { background-color: #fff; } ⭐️⭐️旋转屏幕的时候，字体大小调整的问题 css body { -webkit-text-size-adjust: 100%;...} ⭐️⭐️IOS解析日期问题在某些情况下，苹果系统上解析 YYYY-MM-DD HH:mm:ss 格式的日期会报错 Invalid Date，而安卓系统则没有这个问题。

9052 1

Repo：UI设计字号完全指南，不知道用多少字号的设计师必看！

像素因此，在为您的设计设置正确的屏幕大小之后，让我们在其中使用正确的字体大小。...平板电脑通常，iPad 和 iPhone 上使用的字体大小是相同的。在平板电脑中，由于画布很大，我们可能需要一些更大的标题尺寸，但其余的方法相同。...iPhone (IOS) iPhone应用程序字体大小的快速总结；苹果有一个默认字体 SF Pro；这些数字适用于 SF Pro 或类似字体。...一般来说，中文可以比英文大2个字号左右，可以在下表基础上+1或者2 iPhone（默认）尺寸： iPhone（小）尺寸：需要考虑的几点： 1. 使用多少字体？...正文字体大小：这将是默认字体大小；可用于页面上的所有正文文本，包括；文本、文本框、下拉菜单、按钮、菜单等。 4.

3K2 0

【总结】移动应用界面设计的尺寸设置及规范

来自友盟指数2014年3月份的数据（戳这里看最新数据）： 480 x 800的手机占比最高为31.9%，720 x 1280的手机占比为16.5%位居第二，而240 x 320的手机占比最少为1.0%...原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。...所以720 x 1280尺寸的设计稿上，字体大小可选择为 24px 、28px 、32px 、36px ，主要根据文字的重要程度来选择，特殊情况下也可能选择更大或更小的字体。...5、字体大小 iOS交互设计规范文档上，对字体大小没有做严格的数值规定，只提供了一些指导原则：单位：点pt – 即便用户选择了最小文字大小，文字也不应小于 22 点。...– 文本通常使用常规体和中等大小，而不是用细体和粗体。百度用户体验做过的一个小调查：单位：像素px ? 还有个方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小。

3.6K4 0

CSS尺寸单位介绍

其他品牌的移动设备也是这个道理。物理像素它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。...，因为它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素为 750 1334 在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈现的大小(物理尺寸)是一致的...，不同的是1px所对应的物理像素个数是不一致的。...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em的值并不是固定的； em会继承父级元素的字体大小；任意浏览器的默认字体高都是16px。...我们通过浏览器查看，发现第四级的fong-size为20px；当我们取消第三级font-size后，第三级的字体大小为40px；所以我们说em的字体大小不是固定的，em的大小取决于父级的字体大小当父级的字体大小为

1.5K3 0

CSS尺寸单位介绍

其他品牌的移动设备也是这个道理。物理像素它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。...，因为它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素为 750 * 1334 在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈现的大小(物理尺寸)是一致的...，不同的是1px所对应的物理像素个数是不一致的。...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em的值并不是固定的；em会继承父级元素的字体大小；任意浏览器的默认字体高都是16px。...我们通过浏览器查看，发现第四级的fong-size为20px；当我们取消第三级font-size后，第三级的字体大小为40px；所以我们说em的字体大小不是固定的，em的大小取决于父级的字体大小

1.7K2 0

单屏页面响应式适配玩法

& Android 360 x 480 412 x 732 待补充 Mobile & IOS IPhone 6: 375 x 667 IPhone 6 Plus:...，@media 是根据 width 的变化来匹配的，完全按照桌面分辨率来显示是没问题的，不过高度随便调节一下（变小），而宽度还是很宽，这时候页面底部的部分文本就会溢出被隐藏掉。...事实是，rem 缩小到一定值就不会再缩小了，这个跟浏览器对字体大小限制为最小 12px 一样，看个例子。 ?...8.2、落地方案，vh + vw + JavaScript 计算而直接在元素的属性值上设置为 vh 或 vw，所有的值都会实时变动，没有最小值（除了属性为字体有最小值），这样就最大程度减少 UI 变乱的情况了...9、移动端移动端用户是没法操作浏览器的，所以基本上都是标准的长宽比，用 vh 最合适不过了，或 vw。

2K2 0

写给设计师的移动页面适配小知识

目前主流的，是以 iPhone4 的 640x960px 或者 iPhone6 plus 的 1242x2208px 为基准设计，其他设备均采取适配策略。...所以，无论遇到什么设备，只需要在宽度上进行兼容即可满足，而文本图片等内容，也可以按照宽度自适应，尽可能充分利用屏幕空间。...而开发时，由于 iPhone 以及许多 Android 机都具有高分辨率屏幕，比如 iPhone4S 的 Retina 屏幕实际像素点是物理像素的两倍。...一般除了一些创新的小公司，或者某些专题网站之外，很少会用一套代码来适配所有终端。比如 PC，Mobile，Pad 甚至 iWatch 等，全都用一套代码来适配显然是不科学的。...与 meta 方案不同的是，REM 方案并不是缩放整个页面，而是页面上所有的尺寸都是与根元素（html）的字体大小相关的，我们只是根据不同设备来调整根元素字体大小，则所有尺寸随之变化。

9172 0

移动端Web页面常见问题解决

Retina屏的1px边框 Element{ border-width: thin; } 旋转屏幕时，字体大小调整的问题 html, body, form, fieldset, p, div, h1...: preserve-3d; //设置进行转换的元素的背面在面对用户时是否可见：隐藏 -webkit-backface-visibility:hidden; 圆角bug 某些Android手机圆角失效...27、h5网站input 设置为type=number的问题 h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。...首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。...(横竖屏会出现字体加粗不一致等) iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将

1.8K2 0

移动端H5页面开发坑点指南

属性在IOS及Android上无法使用,在PC端正常 2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间问题4:Safari...;页面占据下方部分，二者没有遮挡对方或被遮挡;如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度，而iphone4和itouch4的Retina...:纠错关于iOS与OS X端字体的优化(横竖屏会出现字体加粗不一致等)问题 iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS上的问题,但桌面版Safari...text-size-adjust: 100%; 某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发针对此种情况只需对不触发click事件的元素添加一行css代码即可...00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00 iOS(safari)标签绑定点击事件无效 iOS(safari)有时候某个标签绑定点击事件无效,加上空的

3.1K1 0

移动应用界面设计的尺寸规范「建议收藏」

原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。...e、字体大小 Android规范中的要求如下：前面提到Android开发中的字号单位是sp，而换算关系是 sp*ppi/160 = px 。...所以720 x 1280尺寸的设计稿上，字体大小可选择为 24px 、28px 、32px 、36px ，主要根据文字的重要程度来选择，特殊情况下也可能选择更大或更小的字体。...4、常用图像、图标大小（来自官方规范文档） 5、字体大小 iOS交互设计规范文档上，对字体大小没有做严格的数值规定，只提供了一些指导原则：单位：点pt – 即便用户选择了最小文字大小，文字也不应小于...– 文本通常使用常规体和中等大小，而不是用细体和粗体。百度用户体验做过的一个小调查：单位：像素px 还有个方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小。

5.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭