HTML5设置视口（viewport）防止移动浏览器自动缩放页面
发布时间：01/15 来源： 浏览：
关键词：
本文章来为各位介绍一篇关于HTML5设置视口（viewport）防止移动浏览器自动缩放页面的例子，这篇教程能够帮助到各位朋友，有兴趣的朋友可以进来看看．
1，视口（viewport）的介绍
“视口”这个概念最早是苹果公司推出iPhone的时候发明的，为的使让iPhone的小屏幕尽可能完整显示网站。不管网站页面原始的分辨率尺寸多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。
在苹果引入视口的概念后，所有的移动开发者也都认同了这个做法。
2，修改视口设置，让浏览器不要自动执行视口缩放
在苹果推出视口概念的时候，当时的网站设计师还不知道什么是响应式设计。随着响应式设计概念的提出，要设计一个真正对移动设备友好的网站，那就得修改视口的设置。告诉浏览器不要自动执行视口缩放。
只需在页面的<head>部分添加如下<meta>元素即可：
<meta name="viewport" content="initial-scale=1.0" />
这行代码告诉移动浏览器使用真实的页面比例，不要缩放。
3，使用在线模拟器，查看网站在不同移动设备的样子
http://MobileTest.me 可以让我们在线查看比较网站在不同的移动设备上的外观（比如iPhone、iPad或其他的Android设备）。
注意：模拟器不支持缩放，其预览网站时，网站就会像你在标签中同上面第2点似的把初始比例设置为1的效果一样
