首页 > 其他分享 >移动端页面字体缩放问题处理

移动端页面字体缩放问题处理

时间:2024-07-30 10:17:18浏览次数:11  
标签:容器 outer 缩放 高度 字体 页面

  • [ 移动端浏览器会缩放字体导致页面布局变化 ]
  • ps: 这个问题弄得我整个人都不好了,移动端浏览器可以设置字体缩放,而且不同浏览器不同设备默认缩放程度不同。

    • 仔细观察页面,就会发现也不是所有的字体都会被缩放。
    • 经过反复对比发现,提供了宽高数值,并且设置了flex布局的文字就不会被缩放,无论怎么设置字体缩放,都不会影响到布局。
    • 统一解决方案,在页面外层套两层容器div,div宽度就是页面宽度,默认给outer容器一个非常大的高度值,比如说30000px,inner容器给定宽度,但是不给定高度。
    • 因为outer容器设定了宽度和高度,这样页面内的字体就不会被缩放,outer高度足够大,就不会导致页面内容显示不全。这样得到的inner的实际高度尺寸才准确。
    • 然后当页面挂载,也就是onMounted函数内部,获取inner容器的offsetHeight,并且将赋值给outer。outer设定ouerflow时hidden。这样就可以了。
    • 或许会疑问,直接给文字元素相应的高度不就好了吗?一方面是麻烦,而方面是有些文本是后端获取的,根本就不知道有多少字,无法预先计算出高度数值。
    • 如果发现有些字体不会缩放了,但是有些还是会被缩放,那么检查一下,是不是给了flex布局。其他布局我没有测试,flex布局是没有问题的。

    标签:容器,outer,缩放,高度,字体,页面
    From: https://www.cnblogs.com/anch/p/18331661

    相关文章

    • Chrome 搜索页面按钮的添加以及图片的更改(萌新)
      在学习react中不断的练习便是最好的进步方法,今天对chrome搜索页面动了心思,好了让我们一起看看怎么去改动吧(我是新手如有不对请大佬补充)首先呢我们要有一个完整的框架,建立一个全新的项目,在里面有一个chrome框架,才可以实行                 ......
    • 帝国CMS网站定时刷新任务用于定时生成指定页面的功能
      一、定时刷新任务介绍:用于定时生成指定页面的功能。 二、增加定时刷新任务1、登录后台,单击“系统”菜单,选择“管理刷新任务”子菜单,进入管理刷新任务界面:2、进入管理刷新任务界面,点击“增加刷新任务”按钮进入增加刷新任务界面:3、进入增加刷新任务......
    • 访问PHP网站为空白页面怎么办?
      错误记录:访问PHP网站为空白页面错误原因:部分程序在缓存文件过大时会导致网站空白,出现这种问题时,一般网站后台还是可以访问,登录后台清空程序缓存即可。部分网站程序会生成一个静态页面,而生成的时候因为种种原因,生成的首页文件index.html大小是0KB,没有内容,造成访问空白。一般......
    • html+css+js作业王者荣耀1个页面西施(带js)
      html+css+js作业王者荣耀1个页面西施(带js)下载地址https://download.csdn.net/download/qq_42431718/89595507目录1目录2项目视频html+css+js作业王者荣耀1个页面西施带js页面1......
    • 脚本-字体woff做映射表
      fromfontTools.ttLibimportTTFontimportddddocrfromioimportBytesIOfromPILimportImage,ImageDraw,ImageFontdefconvert_cmap_to_image(cmap_code,font_path):img_size=1024img=Image.new("1",(img_size,img_size),255)#创建......
    • Django 页面不显示任何内容
      我的“新闻”页面无法正常工作,它正在数据库中保存信息,但不显示任何内容。这里是HTML:{%extends'base.html'%}{%blockcontent%}<h1class='product'>News</h1>{%foriteminnew%}<div><br><strong><ahref='/news/{{item.......
    • 搭建自动化 Web 页面性能检测系统 —— 部署篇
      我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:琉易liuxianyu.cn这一篇是系列文章:搭建自动化Web页面性能检测系统——设计篇搭建自动化Web页面性能检测系统——实现篇作为......
    • 在页面离开前提醒你的 beforeunload 事件
      beforeunload事件在当页面卸载(关闭)或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。以下操作会触发beforeunload事件: ·关闭浏览器窗口 ·通过地址栏或收藏夹前往其他......
    • 维基百科页面的 bs4 方法:获取信息框
      我目前正在尝试将bs4方法应用于维基百科页面:结果不会存储在df中,因为维基百科上的抓取是一种非常非常常见的技术-我们可以使用适当的方法来处理许多不同的工作-我在获取结果方面确实遇到了一些问题-并将其存储到df中-作为一个非常常见的Wikipedia-bs4工作的......
    • 实战|Qt开发WordBN笔记软件#10 添加Font Awesome字体图标
      01背景【WordBN字远笔记】是天恩软件工作室开发的一款免费笔记软件;WordBN基于VS2019、Qt6.5开发,使用QtQuick(QML)开发语言。本课程将以【WordBN字远笔记】的界面为实战基础,详细介绍如何基于Qt/QML开发语言,从零开始开发一套真正的程序,包括国际化、版本发布、安装包制作等项目......