移动web开发小记(布局视口)(视觉视口)(理想视口)

一、视口

布局视口

视觉视口

理想视口

1.1为什么要使用视口

移动开发兴起后,出现的概念

也就是说,如果我们开发的页面只需要适应PC端,则不用考虑视口的概念

看下面的代码,并没有对视口进行配置





  
  
  Document
  







在PC端的表现和在手机端的表现分别如下
移动web开发小记(布局视口)(视觉视口)(理想视口)_第1张图片原因在于,我们在手机端浏览中渲染此页面时,手机设置了视口为980,而我们手机屏幕的宽度为 375,默认情况下PC上的内容是无法在手机端显示完整的,会出现横向滚动条

手机上的浏览器一般不会允许出现这个横向滚动条,所以都会对内容进行缩放,也就是原来需要在980px 上显示的内容,缩放到375px 上就能够展示,你们页面中的所有元素就都要进行等比例的缩放

所以,在我们看来,图片变小了

1.2设置视口宽度

设置固定宽度

使用设备像素

设置缩放比
 
用户缩放

完整写法

布局视口

在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕,就会出现滚动条。js获取布局视口:document.documentElement.clientWidth | document.body.clientWidth;

视觉视口

用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站,我们看到的网站区域将变大,此时视觉视口也变大了,同理,用户放大网站,我们能看到的网站区域将缩小,此时视觉视口也变小了。不管用户如何缩放,都不会影响到布局视口的宽度。js获取视觉视口:window.innerWidth;

理想视口

布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。js获取理想视口:window.screen.width;

你可能感兴趣的:(移动web开发小记(布局视口)(视觉视口)(理想视口))