当前位置: 首页 > 知识库问答 >
问题:

javascript - 后台返回的富文本如何能兼容移动端的展示?

欧阳声
2023-12-07

后台发布的服务文本,前端通过接口调用展示到pc,手机端,像这种返回的很多,但是因为只兼容pc端,所以同样的富文本 在移动端上展示 会出现左右滑动,或者 格式错位的情况,想问一下有没有办法能让同样的富文本兼容移动端

<html><body><p style="text-indent:32.0pt; text-align:justify"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span lang="EN-US" style="font-size:16.0pt">11</span><span style="font-size:16.0pt">月24日下午,北海预报减灾中心组织开展年度第三期“青年讲堂”。本期讲堂以“时代各有不同 青春一脉相承”为主题,中心原副总工程师任荣珠和参加中国第13次北冰洋科学考察队员辛若雪担任宣讲嘉宾。中心领导班子及职工代表50余人参加活动。</span></span></span></span></p><p style="text-indent:32.0pt; text-align:justify">&nbsp;</p><p style="text-indent:32pt; text-align:center"><img alt="" src="/upload/BContent/2023120110410100 颁发证书.png" style="width:477px; height:332px"></p><p align="center" style="text-align:center"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="font-size:15.0pt">图1 中心领导为青年讲堂宣讲员颁发聘书</span></span></span></p><p style="text-indent:32.0pt; text-align:justify"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span style="font-size:16.0pt">辛若雪以“一路向北 破浪乘风”为题,讲述了参与中国第13次北冰洋科学考察,随船78天,航行1.5万余海里,完成49个站位作业并首次在我国北冰洋科学考察中成功冲击北极点的精彩故事,表达了新时代新青年不畏艰险、挺膺担当的壮志豪情。</span></span></span></span></p><p style="text-indent:32.0pt; text-align:justify"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span style="font-size:16.0pt">中心原副总工程师任荣珠参加工作37年,是北海局和中心事业改革发展的亲历者,是中心海洋环境调查与监测工作向海洋生态监测及保护修复升级转型的实践者。刚接到退休通知的她满含不舍之情回溯发展历史,对深耕多年的工作领域提出中肯建议,勉励中心青年要永葆初心、不负韶华,寄语中心事业发展行稳致远、再续新篇。</span></span></span></span></p><p style="text-indent:32.0pt; text-align:justify"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span style="font-size:16.0pt">中心领导号召中心职工,要继续传承“严谨务实、团结协作、敬业规范、高效服务”的工作作风,脚踏实地、接续奋斗,紧抓中心改革发展契机,坚守新时期新使命,走好新时代长征路。</span></span></span></span></p><p style="text-indent:32pt; text-align:center"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span style="font-size:16.0pt"><img alt="" src="/upload/BContent/2023120110293802.中国第13次北冰洋科学考察队员辛若雪宣讲.bmp" style="width:580px; height:415px"></span></span></span></span></p><p style="text-indent:32pt; text-align:center"><span style="font-family:FangSong"><span style="font-size:15.0pt">图2 中国第13次北冰洋科学考察队员辛若雪</span><span style="font-size:15.0pt">宣讲</span></span></p><p style="text-indent:32pt; text-align:center">&nbsp;</p><p style="text-indent:32pt; text-align:center"><span style="font-family:FangSong"><span style="font-size:15.0pt"><img alt="" src="/upload/BContent/2023120110301803.中心原副总工程师任荣珠宣讲.bmp" style="width:580px; height:396px"></span></span></p><p align="center" style="text-align:center"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="font-size:15.0pt">图3 中心原副总工程师任荣珠宣讲</span></span></span></p><p align="center" style="text-align:center">&nbsp;</p><p align="center" style="text-align:center"><span style="font-family:FangSong"><span style="font-size:10.5pt"><span style="font-size:15.0pt"><img alt="" src="/upload/BContent/2023120110310204.全体参会人员合影.bmp" style="width:680px; height:383px"></span></span></span></p><p align="center" style="text-align:center; text-indent:30.0pt"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-size:15.0pt"><span style="font-family:仿宋">图4 全体参会人员合影</span></span></span></span></span></p><p align="center" style="text-align:center; text-indent:30.0pt">&nbsp;</p><p style="text-indent:28.0pt; text-align:justify"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-size:14.0pt"><span style="font-family:幼圆">北海预报减灾中心“青年讲堂”成立于2015年,目前初步形成“精英沙龙”“中心故事荟”“智慧课堂”三个子品牌。“青年讲堂”致力于为青年搭建平台、请青年走上讲台,已成为联系青年、服务青年、凝聚青年的有力抓手。</span></span></span></span></span></p><p style="text-indent:32pt; text-align:right"><span style="font-size:10.5pt"><span style="line-height:27.0pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-size:16.0pt"><span style="font-family:仿宋">(图、文&nbsp; 北海预报减灾中心)</span></span></span></span></span></p><p style="text-indent:32.0pt; text-align:justify">&nbsp;</p></body></html>

尝试过在外面包裹div 加样式 但是效果不是特别好

共有3个答案

都超英
2023-12-07

我一般都是css控制,.xx *{字体大小间距什么的 !important;}
img设置max-width:100%;或者直接width:100%;

吴西岭
2023-12-07

没有很好的办法,所以我一般都建议不用或者少用富文本编辑器。

如果确实有移动端需求,可以削减一些功能,比如只能用 <h1><h2>,之类的标准文本格式标签。

殳俊晤
2023-12-07

对于在不同设备上展示富文本,特别是移动设备,需要考虑的因素有很多。以下是一些建议,希望能帮助你解决问题:

  1. 使用响应式设计:响应式设计是一种网页设计方法,它使网页能够根据设备屏幕的大小和方向来调整布局和样式。使用CSS媒体查询,可以根据设备的特性(如宽度、高度、方向等)来应用不同的样式。
  2. 使用移动友好的字体和布局:有些字体可能在移动设备上显示效果不佳,或者可能太占空间,不适合在移动设备上显示。尽量使用那些在移动设备上表现良好的字体,如Arial,Helvetica等。此外,也要确保布局简洁且有效,避免不必要的元素。
  3. 使用适当的文本大小和行高:在移动设备上,文本大小和行高可能会影响可读性。一般来说,文本大小应该在16px到22px之间,行高应该在1.2到1.5倍之间。
  4. 避免使用复杂的CSS样式:复杂的CSS样式可能会在移动设备上导致性能问题。尽量使用简单的样式,并避免使用复杂的CSS动画或过渡效果。
  5. 测试在不同的移动设备上:最后,一定要在不同的移动设备上测试你的网页,以确保其在各种设备上的显示效果都能让人满意。

以上只是一些基本的建议,具体的解决方案可能需要根据你的具体需求进行调整。

 类似资料:
  • 后台返回整个静态页面的html的富文本 uniapp怎么能生成这个html 或者 在本地给一个html然后 把生产的富文本传递进去 让他展示出来 需要展示的html应该怎么接收这些富文本数据展示出来?

  • 本文向大家介绍JavaScript 实现拖拽效果组件功能(兼容移动端),包括了JavaScript 实现拖拽效果组件功能(兼容移动端)的使用技巧和注意事项,需要的朋友参考一下 页面元素拖拽是一种非常实用的前端效果,基于元素拖拽可以实现很多不同的功能,增加客户端许多操作的便捷性,大大提高用户体验。日常生活中大家多多少少都见过这种效果,所以就不废话了,直接开干吧。 预期目标 实现一个 Class 类,

  • 如何对异步获取数据排序处理? 后端返回的数据是按staff默认排序的: 前端获取到数据还想根据appeal_type和detail_appeal_type进行排序处理,变成相邻的数据,求教怎么处理,我用sort处理但是没生效,反而更错乱了。

  • 问题内容: 我使用原型进行AJAX开发,并且使用如下代码: 而且我发现“结果”是一个空字符串。所以,我尝试了这个: 但这也没有用。如何获取responseText供其他方法使用? 问题答案: 请记住,在someFunction完成工作后很久才调用onComplete。您需要做的是将回调函数作为参数传递给somefunction。当进程完成工作时(即onComplete),将调用此函数:

  • 后台返回一个html文件的链接,想要在前端预览查看,使用window.open("链接")打开,但是浏览器直接下载了,并没有打开文件 后台增加Content-Disposition:inline还是打开

  • 请教一下,后端返回富文本中比如 <div>180<X<=360</div> 这种内容如何正常渲染?(因为<X<=360会被识别成html标签) 因为这个内容是先由后端生产出来的,应该没什么很好的办法直接用replace去锁定替换; 本来和后端商量后改为使用转义后的< 结果请求方法内自动把这个给替换了,因为用的是库,所以暂时没办法去避免这个问题 计划后面换一套请求方法,但是目前还是需要解决这个问题的