建网站建设的基本流程,可信赖的手机网站建设,如何 做网站跳转,主机宝怎么设置网站主页视口是浏览器上显示网页的一块区域#xff0c;大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致#xff0c;移动端视口与浏览器窗口宽度完全独立。
PC端
PC端视口大小等于浏览器窗口可视区域大小#xff0c;无论浏览…视口是浏览器上显示网页的一块区域大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致移动端视口与浏览器窗口宽度完全独立。
PC端
PC端视口大小等于浏览器窗口可视区域大小无论浏览器是否缩放。如下代码均可获得PC端视口宽度。
window.innerWidth
M端
移动端视口分为三类其一布局视口、其二视觉视口、其三完美视口理想视口。
布局视口本身的宽高和看到的没关系
缩放时布局视口的CSS像素数量保持不变只是体积发生变化所以视觉上变大或变小。
document.documentElement.clientWidth //布局视口的宽度 document.documentElement.clientHeight //布局视口的高度
视觉视口眼见看到的宽高视觉宽高
视觉视口是指用户正看到的网页区域大小等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响当页面放大一倍时CSS像素点的体积放大一倍视口内的像素数量会减少一倍如果缩小则正好相反。
window.innerWidth //视觉视口的宽度 window.innerHeight //视觉视口的高度
完美视口理想视口meta nameviewport contentwidthdevice-width
布局视口不友好没有考虑到手机尺寸所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的布局视口的宽度应该与理想视口的宽度一致简单理解就是设备有多宽我们布局的视口就多宽。
meta视口标签
meta nameviewport contentwidthdevice-width, user-scalableno,
initial-scale1.0, maximum-scale1.0, minimum-scale1.0
width 宽度设置的是viewport宽度可以设置device-width特殊值initial-scale 初始缩放比大于0的数字maximum-scale 最大缩放比大于0的数字minimum-scale 最小缩放比大于0的数字user-scalable 用户是否可以缩放yes或no1或0)
标准的viewport设置
视口宽度和设备保持一致视口的默认缩放比例1.0不允许用户自行缩放最大允许的缩放比例1.0最小允许的缩放比例1.0
将布局视口的宽度设置为设备独立像素的宽度。通过如下代码可以获取设备独立像素的尺寸。
screen.width //设备独立像素宽度 screen.height //设备独立像素高度
