最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5设置视口（viewport）防止移动浏览器自动缩放页面
时间：2022-06-25 18:15:39 编辑：袖梨 来源：一聚教程网
1，视口（viewport）的介绍
“视口”这个概念最早是苹果公司推出iPhone的时候发明的，为的使让iPhone的小屏幕尽可能完整显示网站。不管网站页面原始的分辨率尺寸多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。
在苹果引入视口的概念后，所有的移动开发者也都认同了这个做法。
2，修改视口设置，让浏览器不要自动执行视口缩放
在苹果推出视口概念的时候，当时的网站设计师还不知道什么是响应式设计。随着响应式设计概念的提出，要设计一个真正对移动设备友好的网站，那就得修改视口的设置。告诉浏览器不要自动执行视口缩放。
只需在页面的
这行代码告诉移动浏览器使用真实的页面比例，不要缩放。
3，使用在线模拟器，查看网站在不同移动设备的样子
http://MobileTest.me 可以让我们在线查看比较网站在不同的移动设备上的外观（比如iPhone、iPad或其他的Android设备）。
注意：模拟器不支持缩放，其预览网站时，网站就会像你在标签中同上面第2点似的把初始比例设置为1的效果一样
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21