首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【移动端网页布局】移动端网页布局基础概念 ② ( | 布局 | 视觉 | 理想 )

一、 ---- 浏览器 显示 网页页面内容 的 屏幕区域 被称为 " " ; 分为以下几个大类 : 布局 视觉 理想 上面的 , 只需要关注 理想 即可 ; 1、布局...在移动设备上,由于屏幕较小,需要 对网页进行缩放以适应屏幕大小,因此布局也需要进行调整。 移动设备上的布局 通常比 桌面浏览器中的布局 小,因为 移动设备屏幕的大小通常比桌面屏幕小。...移动设备浏览器中,设备屏幕较小,页面需要进行缩放以适应屏幕大小,视觉 会比 布局 小。...下图中 , 在下面的 视觉 中 , 网页只能被看到一部分区域 ; 3、理想 ( 网页大小 = 设备大小 ) 理想 - Ideal Viewport 指的是指在浏览器中,使 网页布局 和 显示最佳的大小...理想的大小 取决于 网页的内容和布局,通常应该 与布局的大小相同 。 通过设置理想,可以 使网页在不同设备上具有相同的布局和显示效果,无需进行缩放和滚动。

1.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

js获取各种高度总结

在写js的时候偶尔需要获取各种高度,比如;浏览器高度,页面高度,滚动高度等。抽空整理了我自己常用到的,时间仓促,没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度(屏幕分辨率): window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度: document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...: document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度(不加边线): document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度(加边线): document.body.offsetHeight document.body.offsetWidth

12.5K20

前端开发-

概述简单理解就是可视区域的大小我们称之为在 PC 端,大小就是浏览器窗口可视区域的大小 console.log(window.innerWidth, window.innerHeight);图片在移动端, 大小并不等于...窗口 大小, 移动端视宽度被人为定义为了 980图片那么在移动端为什么是 980 而不是其他的值呢,因为过去网页的版心都是 980,乔老爷子为了能够让网页在移动端完美的展示, 所以将 iOS 手机的大小定义为了...980,后来谷歌也觉得这是一个非常牛 X 的方案, 所以 Android 手机的也定义为了 980。...980 带来的问题,虽然移动端自动将宽度设置为 980 之后让我们可以很完美的看到整个网页,但是由于移动端的物理尺寸(设备宽度)是远远小于宽度的,所以为了能够在较小的范围内看到口中所有的内容

15300

IntersectionObserver 是否进入了(viewport)

是否进入的使用场景还是很多的,一般第一时间想到的就是监听滚动,关键是scroll很密集,计算量很大,如果做个防抖节流性能还能优化一些,否则性能问题就很有可能发生。...刚刚进入(开始可见)和完全离开(开始不可见)会被触发,初始化不管可见不可见也会触发。...height、left、right、top、width、x、y intersectionRatio:目标元素的可见比例,跟threshold设置的有关,默认0,1 intersectionRect:目标元素与...(或根元素)的交叉区域的信息,跟boundingClientRect一样,不过不可见的时候都是0,height等是在可见的时候出现的高度,然后去计算 isIntersecting:按道理是跟根元素有关的...bottom获取的数据 target:被观察的目标元素,是一个 DOM 节点对象 time:可见性发生变化的时间,这个元素每一次可见不可见间隔的时间 boundingClientRect: option

87620

第118天:移动端开发——

我们称它为 布局。CSS布局会根据它来计算并被约束。 看下面的图例,体会一下布局 ? 2、视觉  虽然独立的布局很大程度上帮助了桌面网站过渡到手机上。...所以该说明一下视觉了。 视觉是用户正在看到的网站的区域。用户可以通过缩放来操作视觉,同时不会影响布局。布局还是保持在原来的宽度。 看下图说明一下视觉区域 ?...如上图,红色箭头之间的区域就是视觉的区域。它和设备的屏幕一样宽,并且它的CSS像素的数量会随着用户缩放而改变。 3、理想 布局的默认宽度并不是一个理想的宽度。...理想仍是为移动端设备准备的。只有手动添加meta标签方才生效。如果没有meta标签,那么布局将会维持它的默认宽度。 如下代码,告诉浏览器,布局的宽度应该与理想的宽度一致。...介绍了三种 布局:不再与移动端浏览器相关联,完全是独立的。实际上布局的宽度要比屏幕宽出很多。 视觉:用户看到的网站展示区域,一般视觉和设备宽度一致。

93020

浅谈移动端中的(viewport)

CSS 像素(CSS pixels) 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性(是否为高密度)以及用户进行的缩放,由浏览器自行换算。...因此,引入了布局、视觉和理想三个概念,使得移动端中的与浏览器宽度不再相关联。...布局的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。 ? 可以看到,默认的布局宽度为 980px。...定义高度,单位为像素,一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义放大最大比例,它必须小于或等于maximum-scale...其与理想宽度的比值为1.5(2880/1920),这个比值叫做设备像素比: 逻辑像素宽度 * 设备像素比 = 物理像素宽度 设备像素比可以通过 window.devicePixelRatio 来获取

2K20

师于源码 | Flutter 区域双向滑动

比如 AndroidStudio 的文件树和编辑器区域,当宽度较窄时,水平方向通过拖拽底部滚动条来滚动。...到这里,就离真相越来越近了, buildCodeArea 方法中很可能就是区域双向滑动实现的场所。...如下所示,蓝色区域内有一行文字,当窗口宽度缩小到文本溢出时,底部会呈现滑动条支持水平滑动: 这里先总结一下实现区域的双向滚动的步骤: 需要两个可滑动的: SingleChildScrollView...需要两个 Scrollbar 用于控制滑动,并且指定 ScrollController, 关联 [滑动] 和 [滑动条]。...tag3 和 tag4 处是准备两个可滑动,这里简单期间使用 SingleChildScrollView,其他滑动组件都可以。

41820

理想的viewport()并不存在

在Set Studio,我们进行了一个小型的非正式实验,以回答“尺寸有多碎片化?”这个问题。我们收集了超过120,000个数据点,涉及超过2,300个不同的尺寸。...最常见的尺寸是什么? 如果我们从收集到的数据点中筛选出前20个独特的尺寸,主要都是较小的尺寸。..."移动端" 与 "桌面端" 在这次实验中,我们仅捕获了每个数据点的宽度和高度,这些尺寸是通过 window.innerWidth 和 window.innerHeight 获取的。...我们决定将任何宽度大于800px的视为“桌面端”,或者我们更喜欢称之为大。 你可能会觉得“800px对于桌面端来说太小了”,如果我们是在测量屏幕尺寸,你是对的。但我们这里测量的是尺寸。...来看看所有的尺寸 受到2015年Open Signal关于Android屏幕碎片化报告的启发,我们用砖石布局展示了前150个最常见的尺寸。你也可以看到所有2,300个不同的尺寸。

19230

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

屏幕可用工作区宽度:window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

8.1K30

vue.js数据渲染完成后,获取页面高度问题

遇到的问题 通过接口请求出来的数据,渲染到页面上,再获取元素内容高度的时候,高度为0 为什么高度会是0 因为我是在接口返回数据后,就直接在回调函数里获取了元素内容的高度。...虽然数据获取到了,但是页面还没有及时的渲染出来,所以获取的内容高度就为0了 然后我就延迟2秒获取内容高度,发现内容高度是渲染完成后的正常高度,但是这样肯定是不行的。...部分代码示例一: mounted() { this.getDataList(); //调用方法 }, methods: { //获取数据列表 getDataList() {...1&keywords=') .then(function (res) { that.dataList = res.data.data; //将获取到的数据赋值给...(() => { console.log(content.offsetHeight); // 600 }) } }, methods: { //获取数据列表

5.9K30

Javascript 获取div真实高度

如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。...原文:http://www.cnblogs.com/zhwl/p/3858682.html 实际测试过程中,发现上面获取真实高度是有问题,其实无论是设置在样式表还是在行内设置,都会获取到你设置的值,如果要获取真实高度...: 获取真实高度...: alert(parseInt($('.article__content div').get(0).offsetHeight)); 获取时只要在这个样式里面的div大小,这个就是真实高度。...这里还附带其它的获取高度方法 alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度

4.9K30

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

window.screen.availWidth  HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...--  var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth...window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

16.1K10
领券