actualTop += current.offsetTop; current = current.offsetParent; } return actualTop; } 2、客户区大小...客户区大小指的是元素内容及其内边距所占空间的大小。...两个属性： clientWidth：width+左右内边距 clientHeight：height+上下内边距 alert(someElement.clientWidth); 3、视口大小 ①innerWidth...（标准模式） document.body.clientWidth和document.clientHeight（混杂模式） 取得视口大小的跨浏览器的解决方案： var pageWidth=window.innerWidth...像textarea、html这些元素，当内容超过所设置的宽高后，就会出现一个滚动条，滚动大小的计算差不多就是指把元素内容平铺后的大小。
在 ArcGIS Pro 中了解有关上下文相关帮助的详细信息 Ctrl+F1 显示或隐藏功能区。 Ctrl+Z 撤消更改。 Ctrl+Y 恢复更改。 Delete 删除所选内容。...右箭头键或左箭头键 在功能区或窗格中从一个选项卡移至另一选项卡。 Tab 键或 Shift+Tab 在功能区、窗格、视图或对话框上的命令或项目之间移动。 上箭头键或下箭头键 在列表中的元素之间移动。...所选视穹 用于所选视穹的键盘快捷键 键盘快捷键 操作 Ctrl + 上箭头 将视穹向远离照相机的方向移动。 Ctrl + 下箭头 将视穹向照相机的方向移动。...Ctrl + 右箭头 向右移动视穹，使之与场景照相机的朝向垂直。 Ctrl + 左箭头 向左移动视穹，使之与场景照相机的朝向垂直。 Ctrl+U 增大视穹高程。 Ctrl + J 减小视穹高程。...向下翻页键向下移动一个屏幕大小。在 2D 中，向下平移一个屏幕宽度。 在 3D 中，照相机在保持照相机角度和高度不变的同时会向下移动一个屏幕宽度。Home向左移动一个屏幕大小。
下图是我们需要适配的移动端屏幕设备尺寸，看到这些数据，是不是有一种键盘敲烂的感觉。 1.1 移动端设备 移动端设备主要包括 Android、iOS 等手机设备。...而我们的方案中使用 rem 单位，是能轻易的根据 html> 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。...而我们的方案中使用 rem 单位，是能轻易的根据 html> 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。
例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。 或者，在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不同的状态： 元素完全隐藏并从文档流中删除。...只有当视口宽度大于400px时，才会显示该图。我向元素添加了hidden`属性。 在CSS中，我使用hidden属性仅在所需的视口大小中显示元素。...同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了，它更改了文档流，或者在我们的示例中，更改了图书流堆栈。...可以将元素添加到HTML页面中，我们可以将其display属性更改为block，这样就可以看到它了。...然而，内容对于有视力的用户仍然是可见的，并且键盘是可聚焦的。 动画与互动 当我们想让一个隐藏的元素动起来时，例如，显示隐藏的移动导航，它需要以一种可访问的方式来完成。
开篇 你是否遇到过一个问题，即在移动设备上有一个固定元素，当键盘激活时，该元素会被键盘遮挡？这已经是多年来网络上的默认行为了。...浏览器将向上滚动以使输入框在键盘上方，因此粘性标题和浮动按钮将消失。 它看起来与以下内容相似： 这是移动浏览器中的默认行为。...在技术术语中，可见部分被称为视口，而隐藏部分以及当前可见的部分则是布局视口。 主要问题是当虚拟键盘激活时，可视视口的大小会缩小。...使用虚拟键盘API修复键盘下隐藏的内容 由于虚拟键盘API的存在，我们可以定义视觉和布局视口相等。...请看下图： 为了更好地展示问题，如下动画所示： 为了解决这个问题，我们需要检测输入是否处于焦点状态，并根据此进行相应的 padding-bottom 更改。
Page Up 将光标向上移动一页 Page Down 将光标向下移动一页 Ctrl + Home（标记模式） 将光标移动到缓冲区的起始处 Ctrl + End（标记模式） 将光标移动到缓冲区的末尾...Ctrl + 向上键 在输出历史记录中向上移动一行 Ctrl + 向下键 在输出历史记录中向下移动一行 Ctrl + Home（历史记录导航） 如果命令行为空，则将视口移动到缓冲区顶部。...Ctrl + End（历史记录导航） 如果命令行为空，则将视口移动到命令行。否则，删除命令行中光标右侧的所有字符。...Ctrl + U 为所选文本添加下划线 Ctrl + V 从剪贴板粘贴选择内容 Ctrl + W 打开“调整大小和扭曲”对话框 Ctrl + X 剪切选择内容 Ctrl + Y 恢复更改 Ctrl +...Ctrl + Y（编辑） 恢复更改 Ctrl + /（编辑） 查看原件 Shift + 箭头键 调整裁剪或选择性对焦区域的大小 Ctrl + 箭头键 移动裁剪或选择性对焦区域 F5（查看项目） 开始幻灯片放映
视口概述视口简单理解就是可视区域的大小我们称之为视口在 PC 端，视口大小就是浏览器窗口可视区域的大小图片在移动端, 视口大小并不等于 窗口 大小, 移动端视口宽度被人为定义为了 980图片那么在移动端为什么是 980 而不是其他的值呢，因为过去网页的版心都是 980，乔老爷子为了能够让网页在移动端完美的展示...>图片图片移动端自动将视口宽度设置为 980 带来的问题，虽然移动端自动将视口宽度设置为 980 之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容...>图片图片如何保证在移动端不自动缩放网页的尺寸，通过 meta 设置视口大小：图片图片我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
Windows 徽标键+ 空格键切换输入语言和键盘布局Windows 徽标键+ Ctrl + 空格键对之前选择的输入所做的更改Windows 徽标键+ Ctrl + Enter打开讲述人Windows...Page up 将光标向上移动一个页面 Page down 将光标向下移动一个页面 Ctrl + Home（标记模式） 将光标移动到缓冲区起始处 Ctrl + End（标记模式） 将光标移动到缓冲区结尾处...Ctrl + 向上键 在输出历史记录中上移一行 Ctrl + 向下键 在输出历史记录中下移一行 Ctrl + Home（历史记录导航） 如果命令行为空，则将视区移动到缓冲区顶部。...Ctrl + End（历史记录导航） 如果命令行为空，则将视区移动到命令行。否则，请删除命令行中光标右侧的所有字符。...选择地址栏 Ctrl + E 选择搜索框 Ctrl + F 选择搜索框 Ctrl + N 打开新窗口 Ctrl + W 关闭活动窗口 Ctrl + 鼠标滚轮 更改文件和文件夹图标的大小和外观 Ctrl
Windows 徽标键 + Shift + 向左键或向右键 将桌面上的应用或窗口从一台显示器移动至另一台显示器。 Windows 徽标键 + 空格键 切换输入语言和键盘布局。...箭头键 按指定方向移动光标。 Page Up 将光标向上移动一个页面。 Page Down 将光标向下移动一个页面。 Ctrl + Home（标记模式） 将光标移动到缓冲区的起始处。...Ctrl + Home（历史记录导航） 如果命令行为空，则将视区移动到缓冲区顶部。否则，请删除命令行中光标左侧的所有字符。...Ctrl + End（历史记录导航） 如果命令行为空，则将视区移动到命令行。 否则，请删除命令行中光标右侧的所有字符。 6. 对话框 快捷键 说明 F4 显示活动列表中的项目。...Ctrl + 鼠标滚轮 更改文件和文件夹图标的大小和外观。 Ctrl + Shift + E 显示选定文件夹上的所有文件夹。 Ctrl + Shift + N 创建新文件夹。
下图是我们需要适配的移动端屏幕设备尺寸，看到这些数据，是不是有一种键盘敲烂的感觉。...浏览器的内核主要是 Webkit 内核，对 HTML5 提供了很好的支持。...，布局视口的大小和视觉视口是一致的，这样就不需要左右滚动页面了。...而我们的方案中使用 rem 单位，是能轻易的根据 html> 的 font-size 计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。
(4)视口变换：将投影变换得到的投影图映射到屏幕的视区上，确定最终图像在屏幕上所占的区域。 上述变换在OpenGL中实际上是通过矩阵乘法来实现。...无论是移动、旋转还是缩放大小，都是通过在当前矩阵的基础上乘以一个新的矩阵来达到目的。OpenGL可以在最底层直接操作变换矩阵。...，这个空间里物体将以正投影的模式表现，在移动的过程中，观察到的物体大小不会发生变化，这解释了为什么在正投影中移动物体，不能观察出物体形状变化； （4）gluPerspective(视角，宽高比，近距离...Draw_Scene(); if (bAnim) fRotate += 0.5f;//旋转 if (tAnim) tRotate += 0.5f; glutSwapBuffers();//交换缓冲区...图A.6(a) 5．实验提高 设置键盘回调函数myKey()，实现键盘交互操作，实现上下前后移动、透视和平行投影模式切换、线框模式切换、退出等操作，见图A.6(b)。 ?
问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！...（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...产生原因 HTML 本身会产生放大或缩小的行为，比如在 PC 浏览器上，可以自由控制页面的放大缩小。但是在移动端，我们是不需要这个行为的。所以，我们需要禁止该不确定性行为，来提升用户体验。...原理与解决方案 HTML meta 元标签标准中有个 中 viewport 属性，用来控制页面的缩放，一般用于移动端。如下图 MDN 中介绍 ?...由于技术水平有限，文章中如有错误地方，请在评论区指出，感谢！ 关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。
（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...产生原因 HTML 本身会产生放大或缩小的行为，比如在 PC 浏览器上，可以自由控制页面的放大缩小。但是在移动端，我们是不需要这个行为的。所以，我们需要禁止该不确定性行为，来提升用户体验。...原理与解决方案 HTML meta 元标签标准中有个 中 viewport 属性，用来控制页面的缩放，一般用于移动端。...软键盘将页面顶起来、收起未回落问题 表现 Android 手机中，点击 input 框时，键盘弹出，将页面顶起来，导致页面样式错乱。 移开焦点时，键盘收起，键盘区域空白，未回落。...由于技术水平有限，文章中如有错误地方，请在评论区指出，感谢！ 关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。
Page Up 将光标向上移动一页 Page Down 将光标向下移动一页 Ctrl + Home（标记模式） 将光标移动到缓冲区的起始处 Ctrl + End（标记模式） 将光标移动到缓冲区的末尾...Ctrl + 向上键 在输出历史记录中向上移动一行 Ctrl + 向下键 在输出历史记录中向下移动一行 Ctrl + Home（历史记录导航） 如果命令行为空，则将视口移动到缓冲区顶部。...Ctrl + End（历史记录导航） 如果命令行为空，则将视口移动到命令行。否则，删除命令行中光标右侧的所有字符。...右或左 Ctrl + Shift 更改从右到左阅读语言的文本阅读方向 对话框键盘快捷方式 按此键 执行此操作 Ctrl + Tab 在选项卡上向前移动 Ctrl + Shift + Tab 在选项卡上向后移动...Ctrl + Shift + 大小 Ctrl + Shift + A 将字符更改为全部使用大写字母 Ctrl + Shift + L 更改项目符号样式 Ctrl + D 插入 Microsoft
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口...视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight...大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。...DOCTYPE html> html lang="en"> 兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持) ?
问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！...（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...产生原因 HTML 本身会产生放大或缩小的行为，比如在 PC 浏览器上，可以自由控制页面的放大缩小。但是在移动端，我们是不需要这个行为的。所以，我们需要禁止该不确定性行为，来提升用户体验。...原理与解决方案 HTML meta 元标签标准中有个 中 viewport 属性，用来控制页面的缩放，一般用于移动端。...由于技术水平有限，文章中如有错误地方，请在评论区指出，感谢！ 关于移动端 H5 的文章告一段落了，之后实践中遇到的问题都将在此文中更新。另外准备做一个移动端 H5 开源项目。
window.devicePixelRatio);// 1 / 1 = 1;1 / 2 = 0.5;图片如何缩小通过 的 initial-scale 属性来缩小，注意点: 缩放视口后视口大小会发生变化...DOCTYPE html>html lang="en"> 移动端常用适配方案四 视口大小进行缩小的，但是在视口缩小之后我们里面的内容并没有随之而然的进行缩小，这个原因其实也很简单，在如下代码我设置了视口的宽度等于设备的宽度，然后在获取了一下视口的宽度...DOCTYPE html>html lang="en"> 移动端常用适配方案四补充 键盘手表
有些用户使用键盘，有些用户使用强大的台式机，还有一些用户使用小型移动设备访问。每个访问者都应该能够打开和关闭菜单。 ?...，只有在“移动”视口为540px 或更小时才能切换。...3D transforms 我们的布局现在是堆叠在一个移动视口大小。除非我添加一些新的样式，否则它将默认覆盖我们的文章。...我通过在: 目标更改时设置可见性转换来实现这一点。 进入时，请勿过渡可见性；立刻可见，因此我可以看到元素滑入并接受焦点。...退出时，给他加一个延迟到过渡效果； 可访问性 UX 增强 链接 此解决方案依赖于更改 URL 以便管理状态。当然，这里应该使用 元素，它可以免费获得一些很好的可访问性特性。
一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网页进行放大。...1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果...下图所示，如果根元素html的字体大小为100px的话，1rem也就等于100px。...标签的font-size为100px，那么这个设计图总宽就有 7.5rem，如果动态的更改根元素的字体大小，是不是就可以实现动态改变元素的大小了？...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
