在Mobile Safari上使用CSS时,字体大小错误

 书友33947127 发布于 2023-02-06 15:54

我在使用简单的CSS-Layout时遇到了麻烦.它适用于桌面浏览器,但不适用于iPhone的Mobile Safari.使用style ="float:right"似乎与Mobile Safari自动调整字体大小相冲突.以下代码在桌面上工作正常但在iPhone上"左"和"跟随文本"比"右"大得多:

LeftRight

Following text

似乎Mobile Safari的自动调整大小并没有触及浮动的单词,只触及其他单词.如前所述在这里,我可以添加-webkit-text-size-adjust: 100%像这样:


    LeftRight
    

Following text

但我想保留Mobile Safari在字体大小和可读性方面的聪明才智.我试图避免为不同的屏幕尺寸编写特殊布局.

那么在同一行文本中是否有更多iOS友好的左右对齐单词方式?

1 个回答
  • WebKit有一个恼人的功能(对于一个设计合理的响应站点)试图放大屏幕上"主要"文本的字体,其中主要是最好的猜测.一旦浮动某些文本,它就不再被视为"主要"内容,因此它没有应用自动缩放.

    您可以使用以下命令禁用此行为

    body {
        text-size-adjust: 100%; 
        -ms-text-size-adjust: 100%; 
        -moz-text-size-adjust: 100%; 
        -webkit-text-size-adjust: 100%;
        }
    

    这仍然是一个实验性的财产.

    您应该将此与响应式设计结合使用,以便为小屏幕设备的用户适当地缩放内容.

    注意:不要使用none; 这会导致旧的webkit桌面浏览器中出现错误,导致它们禁用文本缩放.

    2023-02-06 15:56 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有