- viewport 视口分为两类
- PC端浏览器只有一个视口
这个视口就是浏览器主窗口的区域,显示网页内容的区域。
- 手机端浏览器有三个视口
1.布局视口 (layout viewport)
乔布斯引入一个布局视口的概念,布局视口就相当于我在手机
上先不显示,我先在一个虚拟的布局视口中把桌面端的页面显示
出来,这个视口宽度一般定义为960px,把页面虚拟渲染出来,
我们会缩小这个页面,以至于它可以再手机的浏览器整个的
显示出来,我们通过手势进行缩放。
2.可视视口 (visual viewport)
网页在手机上呈现出来的区域的大小叫做可视视口,对于可视
视口开发者只需要知道它的存在和概念就可以了,因为我们
没有办法对它进行任何的设置或者修改,它是用户自己在进行
缩放、拖动之类的操作来修改的。所以可视视口的尺寸不会
是一个固定值,随着用户的缩放,可视视口在不断的改变
3.理想视口 (ideal viewport)
1.由来
布局视口默认宽度一般比较大(960px),可视视口默认宽度
就是屏幕的宽度,也就是屏幕设备的宽度,这就导致了用户
在查看页面的时候需要通过缩放和滑动页面来查看页面的
不同部分,这虽然很好解决了显示为手机浏览器的网站,
当是体验不是很好,就好像把手机当做放大镜,去放大
显示网页一样,为了设计并构建出来更适合手机浏览器上
查看的页面,有引入了一个概念,叫做理想视口
2.概念
理想视口就是布局视口在一个设备上的最佳尺寸,理想视口下
的页面便于浏览器 浏览 阅读的最佳宽度。不需要缩放就
可以很好的查看页面,理想视口在概念上有点类似于布局视口,
我们不按照960px来布局,按照理想视口来布局页面不需要缩放
就很方便,但它的宽度又和可视视口相同,理想视口就是为构建
手机浏览器优化的页面而添加的,一般来说只有为手机浏览器
优化过的页面它才会使用理想视口
3.如何使用理想视口呢?
1.
1.width为布局视口宽度
2.device-width为可视视口宽度
3.当width=device-width时,width=device-width=理想视口
4.当不指定属性(width=device-width)时,布局视口的宽度是厂商的默认值
5.很多网页禁用了用户的缩放,例如:百度
看完这些你就明白自己的错误在哪里了
记得采纳哦，不懂追问 |
天盟APP下载
