jsp页面适应手机屏幕_HTML5之页面缩放 viewport

 2023-09-09 阅读 18 评论 0

摘要:一、前言前短时间突然遇到一个需求,发现之前一直忽略的点。二、故事背景事情是这样的:是一个公共资源的项目。详情页的内容全部是由后端接口返回,带style样式的标签内容(即富文本),大多表格之类的。现在提出详情页面内容与屏幕大小不匹配。针对这

一、前言

前短时间突然遇到一个需求,发现之前一直忽略的点。

二、故事背景

事情是这样的:是一个公共资源的项目。详情页的内容全部是由后端接口返回,带style样式的标签内容(即富文本),大多表格之类的。现在提出详情页面内容与屏幕大小不匹配。针对这个问题,我进行了一些反馈,建议后端去调整。

方法1:建议统一对样式进行 过虑处理,适应手机端。同时规定下发布信息的方式,避免过于复杂。

方法2:要不就返回固定的语义化标签,,前台处理样式。

html5网页整体缩放、但事情并不像想的那么好。事情来了:接口开发告诉我,不知道怎么调。然后就好玩了。他们老大就这个问题竟然打电话给我们老大了。。。。23333

aaad7d65a79b5d04d0b4e246eab42e1c.png

这一边,项目经理又因时间交付问题,一直催着追问进度。无奈我建议项目经理可以采用直接缩小页面让用户自行放大查看。被采纳了。那下面就开始具体着手了。

三、问题处理

mata标签,其实页面中一直都有添加。项目做多了,直接导入模板,渐渐就忽略了。还是先让我们了解下具体的构造吧。

说到缩放不得不提的一个viewport 中文“视区”。顾名思义网页的可视区域,你可以看到的地方。

2b4061bed1cd26944aaebfd22153fc89.png

一般手机浏览器把页面放在一个虚拟的“窗口”中,通常都比屏幕宽。这样就不会破坏没对手机浏览器进行优化的网页布局了。简单说那么宽的页面不用死死的挤在手机那么小的宽、高的屏幕里。用户可以自己通过滑动那查看网页内容。好了,那下面就来看下viewport标签与相关属性。代码如下:

四、详细说明

a28686314bd5fff49e22ad1ab45be436.png

.jsp怎么打开?当然应该还有其他的方法,我这边也没有试。至于那个height属性没有用到就没放上去,这个一般也不用。好了废话不多说,今天的小结结束。感觉还是要注意细节,常常被自己忽视掉。反正我是这样。

677b680e31c52567b58105423164a8b4.gif

当然我个人建议再遇到这种情况还是让后端去处理,修改富文本返回直接映射数据更好。

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/1/27255.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息