首页 > 代码库 > PC端与移动端的缩放问题
PC端与移动端的缩放问题
总结
在布局视口,CSS像素不会发生个数上的变化,
那么说,一个大页面上,所有CSS像素都是固定住的,是不变的
当用户缩放操作时,在视觉视口上操作,
但是,视觉视口永远屏幕那么大,而且我看东西都是通过屏幕看,
换句话说,我们看东西,看到的东西有限
缩放操作,改变的是CSS像素的面积,
放大操作,CSS像素的面积变大,一个CSS像素里对应的物理像素变多(物理像素在屏幕上,固定不变的)
所以,通过视觉视口看CSS像素面积增大,相应的个数变少
因为我视觉视口呈现的大小固定不变,
缩放不会影响布局视口的尺寸大小,只不过面积发生变化
布局视口,视觉视口,理想视口其实最终代表的都是屏幕的尺寸
在屏幕这一块尺寸中,不同的视口它包含了多少个css像素的个数
(布局视口里面包含的css像素个数不变,视觉视口,理想视口会随缩放而改变)
布局视口:
默认情况下 980个css像素
加meta标签后 设备独立像素所代表的值 width = device-width
视觉视口:
默认情况下 设备独立像素所代表的值
用户放大或者系统放大时 视觉视口所包含的css像素的个数变少
用户缩小或者系统缩小时 视觉视口所包含的css像素的个数变多
理想视口
由于理想视口只在加meta后才会出现,理想视口的尺寸等于设备独立像素所代表的值
布局视口 = 视觉视口 = 理想视口
PC端与移动端的缩放问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。