一聚教程网:一个值得你收藏的教程网站

热门教程

HTML5设置视口(viewport)防止移动浏览器自动缩放页面

时间:2022-06-25 18:15:39 编辑:袖梨 来源:一聚教程网

1,视口(viewport)的介绍

“视口”这个概念最早是苹果公司推出iPhone的时候发明的,为的使让iPhone的小屏幕尽可能完整显示网站。不管网站页面原始的分辨率尺寸多大,都能将其缩小显示在手机浏览器上,这样保证网页在手机上看起来更像在桌面浏览器中的样子。
在苹果引入视口的概念后,所有的移动开发者也都认同了这个做法。

2,修改视口设置,让浏览器不要自动执行视口缩放
在苹果推出视口概念的时候,当时的网站设计师还不知道什么是响应式设计。随着响应式设计概念的提出,要设计一个真正对移动设备友好的网站,那就得修改视口的设置。告诉浏览器不要自动执行视口缩放。
只需在页面的部分添加如下元素即可:

这行代码告诉移动浏览器使用真实的页面比例,不要缩放。

3,使用在线模拟器,查看网站在不同移动设备的样子

http://MobileTest.me 可以让我们在线查看比较网站在不同的移动设备上的外观(比如iPhone、iPad或其他的Android设备)。
注意:模拟器不支持缩放,其预览网站时,网站就会像你在标签中同上面第2点似的把初始比例设置为1的效果一样

 

热门栏目