html5中viewport浅析

昨天对项目中一个公共组件做响应式优化，忙乎了一天，总算可以了，正准备送去QA测试，遇到问题了，改好的组件放到生产环境自测一下。天呐，在iphone6上为啥页面内容变得好小（其实在iPhone系列都是这样，只是先用手里的设备测试而已）。开始查找页面中的头部是否添加viewport的width设置，果然没有，随即加好，以为问题分分钟解决。页面刷新后，被打了一棒子，并没有想象的美好，依然那么小。难道程序也会骗人？？？又开始找页面中其他影响的因素，并没有呀，绞尽脑汁的想，内心已不再淡定。没法往下思考了，留给明天吧。

今天早上来了，第一件事就是直接查找viewport使用方法，兴许是这次搜索的关键字对了，找到了一篇博文（http://blog.csdn.net/wuruixn/article/details/8591989），里边详细介绍viewport的使用方法，从上往下扫视，在最后作者的末尾总结中，有一句话：IOS设备，viewport设置了width,如果页面中的最大宽度超过了这个设置的宽度，那么viewport的width形同虚设。

原来如此，组件的测试场景是在pc端页面中测试，页面中内容的宽度为1000，自己给viewport的width设置的值是device-width（iphone6是375），远远小于1000，viewport的只取得是1000，所以响应式组件会按照1000来进行渲染，375尺寸下的内容放到1000尺寸下显示小是必然的。应该放到移动端项目中进行测试。

今天又学到了一点。如有错误欢迎指正。

自己的前端路还很长，且依然艰难，想到过放弃，内心却总是会有一个声音说，坚持一下没准就行了呢。事实证明，坚持真的可以行。