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

一文彻底搞懂js中位置计算

y-coord 是指在元素左上方区域纵轴方向上想要显示像素。 也就是element.scroll(x,y)会将元素滚动条位置滚动到对应x,y位置。...,包括由于溢出导致图中不可见内容。...判断当前元素是否存在滚动条 出现滚动条便意味着元素空间将大于其内容显示区域,根据这个现象便可以得到判断是否出现滚动规则。...所谓布局宽度也就是相对于我们上边说到clientHeight/Width,offsetHeight/Width,他们都是包含border以及滚动宽/高(如果存在的话)。...计算元素是否出现在口内 利用还是元素距离位置小于大小。 注意即便变成了负值,那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。

3.7K10

07-移动端开发教程-移动端视口

如果故意设置操作系统分辨率为512*384(水平和垂直各缩小1倍),那么此时css定义1px像素盒子在屏幕中显示宽度比原来高分辨率宽度增加一倍,所以CSS中像素只是相对,不是绝对。...如果设置一个元素为100px*100px,看起来就是屏幕100/320 如果布局宽度=device-width(设备宽度,也就是:物理像素/dpr)时,此时页面100%宽度正好能在视觉口中完全显示...(ideal viewport) 所谓理想口是: 第一,不需要用户缩放和横向滚动条就能正常查看网站所有内容; 第二,显示文字大小是合适,比如一段14px大小文字,不会因为在一个高密度像素屏幕里显示得太小而无法看清...=1"> 为什么我们指定了meta标签viewport缩放比例1也可以实现理想口呢?...视觉口:当页面手动放大时候,用户可以看到网页内容减少,视觉尺寸变小。反之,同理赘述。

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

07-移动端开发教程-移动端视口

如果故意设置操作系统分辨率为512*384(水平和垂直各缩小1倍),那么此时css定义1px像素盒子在屏幕中显示宽度比原来高分辨率宽度增加一倍,所以CSS中像素只是相对,不是绝对。...由于移动端口可以进行放大、缩小、改变宽高,所以造成了大小跟屏幕能显示内容宽度和布局宽度不一致,这就出现两个概念:布局口和视觉口。...如果设置一个元素为100px*100px,看起来就是屏幕100/320 如果布局宽度=device-width(设备宽度,也就是:物理像素/dpr)时,此时页面100%宽度正好能在视觉口中完全显示...(ideal viewport) 所谓理想口是: 第一,不需要用户缩放和横向滚动条就能正常查看网站所有内容; 第二,显示文字大小是合适,比如一段14px大小文字,不会因为在一个高密度像素屏幕里显示得太小而无法看清...=1"> 为什么我们指定了meta标签viewport缩放比例1也可以实现理想口呢?

1.4K80

【适配】425- 彻底搞懂移动Web开发中viewport与跨屏适配

白话描述一下: ●计算机把图像渲染到显示过程中,会先把图像画在一个逻辑层画布上,然后从这个画布中框选一部分,将其投影到显示层。 ●这个选框就是口,显示层就是窗口。...●在浏览器中,我们可以通过滚动条来移动口以看到更多网页内容。 更形象口解释: ?...如果浏览器和针对 PC 制作网页都不做任何处理,那么在窄屏设备上加载网页,我们看到效果便是默认显示网页左上角部分,然后通过水平和竖直方向滚动来浏览网页其他部分。...3.3 可定制viewport 浏览器厂商:“既然数,你们都各种意见,那好吧,你们自己定吧。”...在滚动到视图中之前,口外部内容在屏幕上不可见。 ●当前可见口部分称为可视口。这可以小于布局口,例如当用户进行缩放缩放时。该布局口保持不变,但视觉口变小。

2.8K30

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

一、口 ---- 浏览器 显示 网页页面内容 屏幕区域 被称为 " 口 " ; 口分为以下几个大类 : 布局口 视觉口 理想口 上面的口 , 只需要关注 理想口 即可 ; 1、布局口...为了 使网页在 不同设备上 都能够 正确地显示布局,开发者可以使用 响应式设计来根据设备不同调整布局口。...布局口 机械地 将 PC 端网页在手机端呈现 ; Android / iOS 将 布局口 分辨率 设置为了 980 像素 宽度 , PC 端网页可以显示布局口 中 ; 如下图所示 , 强行将浏览器宽屏界面...下图中 , 在下面的 视觉口 中 , 网页只能被看到一部分区域 ; 3、理想口 ( 网页大小 = 设备大小 ) 理想口 - Ideal Viewport 指的是指在浏览器中,使 网页布局显示最佳口大小...理想大小 取决于 网页内容和布局,通常应该 与布局大小相同 。 通过设置理想口,可以 使网页在不同设备上具有相同布局显示效果,无需进行缩放和滚动

1.2K30

彻底搞懂移动Web开发中viewport与跨屏适配

白话描述一下: ●计算机把图像渲染到显示过程中,会先把图像画在一个逻辑层画布上,然后从这个画布中框选一部分,将其投影到显示层。 ●这个选框就是口,显示层就是窗口。...●在浏览器中,我们可以通过滚动条来移动口以看到更多网页内容。 更形象口解释: ?...如果浏览器和针对 PC 制作网页都不做任何处理,那么在窄屏设备上加载网页,我们看到效果便是默认显示网页左上角部分,然后通过水平和竖直方向滚动来浏览网页其他部分。...3.3 可定制viewport 浏览器厂商:“既然数,你们都各种意见,那好吧,你们自己定吧。”...在滚动到视图中之前,口外部内容在屏幕上不可见。 ●当前可见口部分称为可视口。这可以小于布局口,例如当用户进行缩放缩放时。该布局口保持不变,但视觉口变小。

3.2K20

零基础入门 23: UGUI ScrollView

为什么要勾掉Mask上show mask呢,通常我们在制作滚动视图时候,因为每一个cell都可以进行背景填充,所以并不是很需要这个大背景板,如果大家需要,也可以勾。...下图解释了勾选和勾选区别,实际就是Image是否显示控制 ?...因为准备为大家制作一个垂直滚动视图作为示例,所以这里增加了一个垂直布局组件。 ?...从上图可以看出,添加第一个Image时候,因为content上child Force Expendheight没有勾选,导致我们第一个ImageHeight为0无法显示,所以在Content上布局组件中勾选上了...因为我们要创建是垂直,所以在ScrollRect组件上把水平滚动去掉。 ? 此时我们运行项目,来查看一下效果。顺便在运行中,又复制了几个图片,来穿插显示,这样更能体现出我们滚动视图显示。 ?

3K20

终于等到你,新虚拟键盘API 即将到来,快来先睹为快吧!

在技术术语中,可见部分被称为口,而隐藏部分以及当前可见部分则是布局口。 主要问题是当虚拟键盘激活时,可视大小会缩小。...使用虚拟键盘API修复键盘下隐藏内容 由于虚拟键盘API存在,我们可以定义视觉和布局口相等。...无法滚动到页面的最底部 当口底部有一个带有 position: fixed 项目时,我们通常会添加 padding-bottom 来偏移页面,使用户可以滚动到最底部。...让我们举个简单例子。我们有一个联系页面,其中包含长内容和表单输入。如果我们选择让虚拟键盘覆盖页面内容,那么将无法滚动到表单最后。 在这种情况下,建议键盘覆盖内容。明智地使用它。...心里想,为什么不把CSS比较函数和虚拟键盘值混合在一起呢?试了一下,结果还真行。 请查看下面的视频: 这是怎么运作

28020

从零开始学 Web 之 CSS3(八)CSS3三个案例

PC设备设计网页也能在移动设备上正常显示,移动设备厂商也的确是这样来处理。...从图中统计我们得知不同移动厂商分别设置了一个默认viewport值,这个值保证大部分网页可以正常在移动设备下浏览。...1、layout viewport(布局口)指的是我们可以进行网页布局区域大小,同样是以CSS像素做为计量单位,可以通过下面方式获取 /* 获取layout viewport */ document.documentElement.clientWidth...window.screen.width / window.devicePixelRatio; window.screen.height / window.devicePixelRatio; 理解两个viewport后我们来解释为什么网页会被缩放或出现水平滚动条...,那么最终layout viewport是要显示在ideal viewport里,而layout viewport大于ideal viewport时,于是就出现滚动条了,那么为什么有的移动设备网页内容被缩放了呢

1.3K10

vw, vh视窗宽高单位使用

不过“看见你”和“触碰你”是不一样。正好,机缘巧合,最近又与这两个单位想见。大致琢磨了下,貌似vh这个单位可以实现以前曾希望实现整体高度自适应布局。...还是显示宽度大小(screen.width)?疑惑了! 每当我疑惑时候,不是去找个“觉得应该是”解释,而是,新建个HTML页面,像学生时代做生物实验般,多条件对比验证之。 ?...下图为在IE9浏览器下默认打开效果: 显然,这里区”不可能是浏览器外部宽度,计算值匹配。 ?...因此,vw单位用做宽度自适应布局,完全是吃力讨好得显摆! 我们需要想是其他一些只能vw, vh才能完成应用场景,这就是下面依次要展示内容~~ 五、场景之:元素尺寸限制 ?...然后各个浏览器测试发现,效果是一模一样(不支持position: fixedIE6就当它不存在吧),固定在区底部,不随滚动滚动空白工具栏: 说实话,原本第一眼看到单位vw, vh时候,觉得这个单位

2.5K10

从零开始学 Web 之 移动Web(一)屏幕相关基本知识,调试,口,屏幕适配

PC设备设计网页也能在移动设备上正常显示,移动设备厂商也的确是这样来处理。...从图中统计我们得知不同移动厂商分别设置了一个默认viewport值,这个值保证大部分网页可以正常在移动设备下浏览。...1、layout viewport(布局口)指的是我们可以进行网页布局区域大小,同样是以CSS像素做为计量单位,可以通过下面方式获取 /* 获取layout viewport */ document.documentElement.clientWidth...window.screen.width / window.devicePixelRatio; window.screen.height / window.devicePixelRatio; 理解两个viewport后我们来解释为什么网页会被缩放或出现水平滚动条...,那么最终layout viewport是要显示在ideal viewport里,而layout viewport大于ideal viewport时,于是就出现滚动条了,那么为什么有的移动设备网页内容被缩放了呢

74821

第133天:移动端开发一些总结

1、 piexl 像素知识 640 * 1136图片能不能在iphone5上完全展示?...iphone5 dpr = 2; DPI:打印机每英寸可以喷墨汁点(印刷行业) PPI:屏幕每英寸像素数量,即单位英寸内像素密度 目前,在计算机显示设备参数描述上,二者意思一致 计算公式:以iphone5...2、 viewport 手机浏览器默认为我们做了两件事情: ① 页面渲染在一个980px(ios)viewport ② 缩放 为什么要有viewport?...度量|口 visual viewport ==== 窗口缩放scale 布局 layout viewport 设计移动web,为什么不使用默认980px布局viewport?...① 宽度不可控制,不同系统设备默认值都可能不同 ② 页面缩小版显示,交互不友好 ③ 链接不可点 ④ 有缩放,缩放后又有滚动 font-size为40px等于pc上12px同等物理大小,规范 3、 meta

91620

CSS 中 关于 Overflow ,你需要了解这些知识点!

在上图中,无论内容是否长,滚动条总是可见。注意,这取决于操作系统。 Auto auto这是一个聪明关键字,仅当内容比其容器长时才显示滚动条。 ?...注意,在图中,只有当内容比其容器长时,滚动条才可见。接下来,我们将讨论与overflow相关longhand属性 Overflow-X 该家伙负责x轴或元素水平边。...使用`auto`是因为它在内容足够长之前不会显示滚动条 */ .modal__content { flex-grow: 1; /* [1] */ overflow-y: auto; /...水平滚动问题 通常,我们会遇到水平滚动问题,当原因未知时,滚动滚动会变得更加困难。 在本节中,将列出水平滚动一些常见原因,以便大家以后在构建布局时可以想到到它们。...在这种情况下,要做是打开DevTools,然后开始删除元素并注意。 一旦水平滚动消失了,就可以确定引起问题元素。

3.8K20

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

由此来做一个阶段性总结。 常规操作哈,点赞后再观看呗!你点赞就是创作动力之一! 问题 下面列举了遇到一些常规问题,如有遇到其他问题请在评论区补充,之后也会实践后加以补充,感谢!...防止丢失,点赞收藏后跳转至快捷通道:1px通道与响应式布局通道 接下来呢,我们看看其他问题原理和解决方案吧。 以下解决方案,均经过测试成功,健康安全,请放下食用。...产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终在 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...很容易想象,在需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,在具有滚动情况下,还是建议使用 click 处理。...对于矩形口,例如普通笔记本电脑显示器,其值等于零。对于非矩形显示器(如圆形表盘,iPhoneX 屏幕),在用户代理设置四个值形成矩形内,所有内容均可见。

2.1K20

【CSS】872- 浅析rem布局方案

一些像素概念 物理像素:即实际每一个物理像素,也就是移动设备上每一个物理显示单元(点) 设备逻辑像素(css中px):可以理解为一个虚拟相对显示块,与物理像素有着一定比例关系,也就是下面的设备像素比...说完基本概念,来说一下几个问题: retina屏图片模糊 首先普及一下位图像素:一个位图像素是图片最小数据单元,每一个单元都包含具体显示信息(色彩,透明度,位置等等) 那为什么在dpr高retina...,会挤作一团,所以就有了viewport概念,又称布局口(虚拟口),这个口大小接近于pc,大部分都是980px visual viewport 有了布局口,还缺一个承载它真是口,也就是移动设备可视区域...这样在视觉口中创建了一个布局口,类似overscroll:scroll;这样,可以通过滚动拖拽、缩放扩大进行较好访问体验 ideal viewport 像上面的体验在早些年可能比较多,但是近几年几乎很少了...,还是归咎于用户体验,所以,我们还需要一个口-理想口(同样是虚拟口),不过这个理想大小是等于布局,这样用户就能得到更好浏览体验。

81220

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

防止丢失,点赞收藏后跳转至快捷通道:1px通道与响应式布局通道 接下来呢,我们看看其他问题原理和解决方案吧。 以下解决方案,均经过测试成功,健康安全,请放下食用。...产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终在 safari 文档里面寻找到了答案(文档链接在参考资料项)。...很容易想象,在需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,在具有滚动情况下,还是建议使用 click 处理。...产生原因 我们在app 布局中会有个固定底部。安卓一些版本中,输入弹窗出来,会将解压 absolute 和 fixed 定位元素。导致可视区域变小,布局错乱。...对于矩形口,例如普通笔记本电脑显示器,其值等于零。对于非矩形显示器(如圆形表盘,iPhoneX 屏幕),在用户代理设置四个值形成矩形内,所有内容均可见。

1.2K30

【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

由此来做一个阶段性总结。 常规操作哈,点赞后再观看呗!你点赞就是创作动力之一! 问题 下面列举了遇到一些常规问题,如有遇到其他问题请在评论区补充,之后也会实践后加以补充,感谢!...防止丢失,点赞收藏后跳转至快捷通道:1px通道与响应式布局通道 接下来呢,我们看看其他问题原理和解决方案吧。 以下解决方案,均经过测试成功,健康安全,请放下食用。...产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终在 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...很容易想象,在需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,在具有滚动情况下,还是建议使用 click 处理。...对于矩形口,例如普通笔记本电脑显示器,其值等于零。对于非矩形显示器(如圆形表盘,iPhoneX 屏幕),在用户代理设置四个值形成矩形内,所有内容均可见。

1.3K22

移动端必备H5问题及解决方案

很容易想象,在需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,在具有滚动情况下,还是建议使用 click 处理。...产生原因 我们在app 布局中会有个固定底部。安卓一些版本中,输入弹窗出来,会将解压 absolute 和 fixed 定位元素。导致可视区域变小,布局错乱。...contain:视图端口按比例缩放,以适合显示内嵌最大矩形。 cover:视图端口被缩放以填充设备显示。强烈建议使用 safe - area inset 变量,以确保重要内容不会出现在显示之外。...对于矩形口,例如普通笔记本电脑显示器,其值等于零。对于非矩形显示器(如圆形表盘,iPhoneX 屏幕),在用户代理设置四个值形成矩形内,所有内容均可见。...),作用是在 env() 生效情况下,给出一个备用值。 constant() 被 css 2017-2018 年为草稿阶段,是否已被标准化未知。

4.1K42
领券