缩放浏览器不会换行_HTML5之页面缩放 viewport

一、前言

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

二、故事背景

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

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

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

但事情并不像想的那么好。事情来了：接口开发告诉我，不知道怎么调。然后就好玩了。他们老大就这个问题竟然打电话给我们老大了。。。。23333

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

三、问题处理

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

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

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

四、详细说明

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

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