手机网页看起来很棒的秘密揭晓：Viewport meta标签全能指南

什么是Viewport meta标签

给你说个小秘密，那叫做“Viewport meta”的玩意儿能让手机网页看起来很棒。咱们做响应式设计的时候经常要调宽啊、比例啥的，这样不论屏幕大小都舒服。有木有人觉得只有响应式设计才能用这个呀？错咯~非响应式设计也可以用的

Viewport meta标签的一般使用

Viewport meta tag这玩意儿可管用了，它能帮咱们搞定手机上看网页的时候，屏幕大小和缩放比例的问题。只要用上这个标签，无论在哪儿看网页，都能给你展示得漂漂亮亮的！

在非响应式设计中使用Viewport

别忘了手机上网页的Viewportmeta也很关键！比如说，你的网站看着感觉怪怪的，要么挤得满满当当，要么字都跑到边边上了；又或者是包太小，右边空余地方太多。

别被苹果忽悠了，默认的Viewport Width实际上是 1232px！

好多人觉得iPhone上的VIEWPORT宽度就是那统一的980px没错？实际上并非如此！有的时候可能会有偏差。别担心，接下来我给你讲两个实例，让你了解啥时候该调整Viewport meta标签控制页面大小。

例子一：Themify站点截屏对比

告诉你个秘密，别看这两张图的区别不大，其实第一张图好紧凑不舒服，但加了1024宽后，屏幕跟网页都能舒适地呼吸！所以，这样搞下来，手机浏览网页肯定会更轻松！

例子二：容器过窄怎么办

大家有没有注意到，我们用手机上网时，有些页面的左下角会出现一个小框框，显得缝隙很大。类似这样从左往右长的图，看右侧好像要跳出来似的。解决这问题超简单，只要咱们把手机浏览器的viewport设置成720像素就能搞定！

通常错误：initial-scale=1参数

哈喽伙伴们！偷偷告诉你一件事儿，虽然设置了’initial-scale =1’可以让网页实现无级放大缩小，但是你可别忘了微调网页的左右宽度！想象下买衣服时尺寸不合适的尴尬场景，网页也会看起来怪怪的，特别是在不同大小的屏幕上看更明显。那咋整？没辙了，只能靠咱自己动动手来放大或缩小页面。再提醒大家，有些人喜欢把’user-scalable=no’,’maximum-scale=1’放在一起用，其实这会影响网页的缩放功能！这样的话，网页的完整内容可就看不全了！

结语

记得要是你的网站在手机上看起来不太好，可以试试放个Viewport meta标签，这样会效果大增！看看我这个简单的教程，几分钟就能搞定怎么加这个标签让非响应式设计更好看，加油！