屏幕分辨率与显示分辨率不同。计算机可以修改显示分辨率，信号传递给屏幕，屏幕会进行计算，在屏幕上显示。...== 位图像素 在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素 等于 N 个物理像素 像素密度 屏幕上每英寸可以显示的像素点的数量，单位是 ppi...延时隐藏遮盖元素 页面跳转的选择 移动端页面跳转可以使用 a 链接，也可以使用 touchstart 事件来触发 JS 代码完成跳转 效率上，touchstart 速度更快 SEO 优化上， a 链接效果更好...如何阻止默认行为 可以给 document 绑定 touchstart 事件，并阻止默认行为，不过需要关闭被动模式。这里推荐创建一个包裹元素，绑定 touchstart 事件并阻止默认行为。...解决问题只需要给目标元素绑定 touchstart 事件并阻止事件冒泡，这样当前操作的默认行为仍然可用。
主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } js 篇 移动端click屏幕产生200-300 ms的延迟响应 移动设备上的...NAN 的问题 将日期字符串的格式符号替换成'/' 'yyyy-MM-dd'.replace(/-/g, '/') 软键盘问题 IOS 键盘弹起挡住原来的视图 可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded...（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。...不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。
webkit-tap-highlight-color: transparent; } ⭐️⭐️禁止动画闪屏 通过使用perspective、backface-visibility和transform-style属性，可以解决在移动设备上动画闪屏的问题...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...原因 这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。 解决方案 利用伪元素和 scale 来实现 0.5px 的效果。...设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。...在需要锁定滚动的情况下，给 document 添加 touchstart 和 touchmove 事件的监听器，通过捕获触摸滑动事件，并根据情况阻止默认行为，从而避免滚动穿透。
例如，当焦点聚焦到控件上时， TalkBack 会大声朗读出控件，如果为其加上了定时器，可能会阻止控件完成某些任务。...对于放大了屏幕的用户，如果不在滑块和值之间来回浏览的话，可能不能同时看到滑块和值。 字体 为了提高可读性，用户可能会增加字体大小。移动设备或浏览器有调整系统字体大小的功能。...硬件或软件方向控制器（例如 D-pad、轨迹球或键盘）允许用户以线性的方式从一个选择的元素跳到另一个元素。 层次 根据项目的相对重要性，将项目放置在屏幕上。...其他设计的注意事项： 使用可缩放文字和一个宽敞的布局，来适应那些可能开启大文字、颜色矫正、放大或其他无障碍功能的用户 键盘/鼠标界面可以仅通过键盘就能访问所有任务和所有悬浮信息 触摸界面应允许屏幕阅读器和其他无障碍设备读取界面中的所有内容...不要提及确切的手势和交互 不要告诉用户如何与控件进行身体上的交互，因为它们可能使用键盘或其他设备进行导航，而不是用手指或鼠标进行导航。无障碍软件会为用户描述正确的交互方式。
meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=...<em>移动</em>端字体单位font-size<em>选择</em>px还是rem，对于只需要适配手机<em>设备</em>，使用px即可，对于需要适配各种<em>移动</em><em>设备</em>，使用rem，例如：只需要适配iPhone和iPad等分辨率差别比较挺大的<em>设备</em> rem...200-300 ms的延迟响应 <em>移动</em><em>设备</em><em>上</em>的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。...什么是Retina <em>显示</em>屏，带来了什么问题 retina：一种具备超高像素密度的液晶屏，同样大小的屏幕<em>上</em><em>显示</em>的像素点由1个变为多个，如在同样带下的屏幕<em>上</em>，苹果<em>设备</em>的retina<em>显示</em>屏中，像素点1个变为4...个 在高清<em>显示</em>屏中的位图被放大，图片会变得模糊，因此<em>移动</em>端的视觉稿通常会设计为传统PC的2倍 那么，前端的应对方案是： 设计稿切出来的图片长宽保证为偶数，<em>并</em>使用backgroud-size把图片缩小为原来的
这种方式允许容器根据视口宽度缩放尺寸。 # 移动优先 开发移动版网页有很多限制：屏幕空间受限、网络更慢。用户跟网页交互的方式也不一样：可以打字，但是用着很别扭，不能将鼠标移动到元素上触发效果等。...除了前面提到的交互菜单，移动版设计主要关注的是内容。在大屏上，可以把页面的大块区域拿来做头部、主图、和菜单。然而在移动设备上，用户通常有更明确的目标。 移动版设计就是内容的设计。...此外 content 属性还有第三个选项 user-scalable=no ，阻止用户在移动设备上用两个手指缩放。通常这个设置在实践中并不友好，不推荐使用。...# 断点的选择 不要总想着设备。市面上有成百上千中设备和屏幕分辨率，无法逐一测试。相反，应该选择适合设计的断点，这样不管在什么设备上，都能有很好的表现。...在移动设备上实现表格的响应式布局 table { width: 100%; } @media (max-width: 30em) { /* 让表格所有的元素都显示为块级 */ table,
移动端 H5 相关问题汇总： 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来、收起未回落问题 iPhone...touchmove 事件的速度是可以实现定义的，取决于硬件性能和其他实现细节 preventDefault 方法，阻止同一触点上所有默认行为，比如滚动。...原理与解决方案 HTML meta 元标签标准中有个 中 viewport 属性，用来控制页面的缩放，一般用于移动端。...原理与解决方案 解决方案一：使用 touchstart 替换 click 前面已经介绍了，移动设备不仅支持点击，还支持几个触摸事件。那么我们现在基本思路就是用 touch 事件代替click 事件。...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe - area inset 变量，以确保重要内容不会出现在显示之外。
要禁用移动端的软键盘弹出事件，可以使用 readonly 属性或 disabled 属性来设置输入框的状态。 阻止移动设备上的软键盘弹出，同时仍然允许用户通过其他方式填充输入框。...以下是两种方法的示例： 使用 readonly 属性： 通过将输入框设置为只读，移动设备上的软键盘将不会弹出。...使用 disabled 属性： 通过将输入框禁用，移动设备上的软键盘将不会弹出，并且用户无法对其进行任何操作。...这些方法只能禁用软键盘的弹出，无法完全阻止用户在移动设备上输入内容。 用户仍然可以通过剪贴板、语音输入等方式输入文本。...问题： 移动端事件input输入框 日历组件滚动选择日期 会有键盘弹出 怎么在滚动选择时间的时候 禁用键盘弹出 在移动端的滚动选择组件中，如果你希望在滚动选择时禁用键盘弹出，可以尝试使用以下方法：
缩放 用于“缩放”工具的键盘快捷键 键盘快捷键 操作 注释 F 应用缩放因子。 打开比例对话框。 Ctrl + 单击 重新定位锚点。 将选择锚点重新定位到单击位置。...前进到下一折点并使其在地图中闪烁。 上箭头键 返回到上一折点。 返回到上一折点并使其在地图中闪烁。 Shift + 单击 选择包含行。 选择您单击的第一行与最后一行之间的所有行。...P 使线平行显示。 约束平行于另一条线段的新线段的方向。将鼠标悬停在现有线段上，然后按键盘快捷键。释放键将设置约束并闪烁将其约束到的线段。 E 使线垂直显示。 约束垂直于另一条线段的新线段的方向。...拓扑错误检查器 用于拓扑错误检查器的键盘快捷键 键盘快捷键 操作 注释 上箭头键和下箭头键 移动指针。 在错误表的行间上下移动指针。 Ctrl+Shift+等号 (=) 缩放错误。...将活动地图缩放至当前错误。 D 显示拓扑规则。 显示当前错误违反的拓扑规则。 F 选择要素。 选择导致该错误的主要要素。 X 将错误标记为异常。 将当前错误标记为异常。 E 清除异常。
（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...原理与实践 之前两篇文章已经详细的论述了1px 问题与 响应式布局问题，并给出了原理和解决方案。...same active touch point, such as scrolling. touchmove 事件的速度是可以实现定义的，取决于硬件性能和其他实现细节 preventDefault 方法，阻止同一触点上所有默认行为...原理与解决方案 HTML meta 元标签标准中有个 中 viewport 属性，用来控制页面的缩放，一般用于移动端。如下图 MDN 中介绍 ?...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。
（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...原理与实践 之前两篇文章已经详细的论述了1px 问题与 响应式布局问题，并给出了原理和解决方案。...same active touch point, such as scrolling. touchmove 事件的速度是可以实现定义的，取决于硬件性能和其他实现细节 preventDefault 方法，阻止同一触点上所有默认行为...原理与解决方案 HTML meta 元标签标准中有个 中 viewport 属性，用来控制页面的缩放，一般用于移动端。...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。
作者：键盘上的眼泪 https://segmentfault.com/a/1190000015178877 1.解决页面使用 overflow: scroll 在 iOS 上滑动卡顿的问题?...在安卓上面，点击页面底部的输入框，软键盘弹出，页面移动上移。 而 ios 上面，点击页面底部输入框，软键盘弹出，输入框看不到了。。。...-- 设置缩放 --> <!...font-size 选择 px 还是 rem？...// 如需适配多种移动设备，建议使用 rem。
这些年我们亲历了诸多移动硬件的演进，如 3D 显示器和高分辨率屏幕等，也因为这些演进，让我们在应用商店中看到越来越多新颖的游戏出现，让玩家们在更沉浸的画面和游戏体验中流连忘返。...这意味着开发者可以通过针对不同的外形和更大的显示设备优化游戏，来吸引正在快速增长的大量受众群体。 如果您在应用商店上架了游戏，那它可能已经可以在 Chrome OS 上运行了。...例如检测键盘的连接: 然后，您可以在启动时或在配置更改时查询 InputManager，并根据触摸屏或者键盘的可用与否来切换控制方案。...△ 切换操作模式时，一个推荐的做法是暂停游戏并让用户使用对应的输入设备进行一次确认操作 如果您是在游戏做完后才打算支持键盘，请考虑实现下面的功能，这样可以大幅提高可用性和完成度: 技能键绑定 WASD...团队在构建游戏时考虑了各种输入方式和显示器尺寸，并确保了游戏在不同种类的设备上拥有一致的高速性能表现。 Gameloft 在 GDC 2019 上的分享 www.youtube.com/watch?
这些年我们亲历了诸多移动硬件的演进，如 3D 显示器和高分辨率屏幕等，也因为这些演进，让我们在应用商店中看到越来越多新颖的游戏出现，让玩家们在更沉浸的画面和游戏体验中流连忘返。...这意味着开发者可以通过针对不同的外形和更大的显示设备优化游戏，来吸引正在快速增长的大量受众群体。 如果您在应用商店上架了游戏，那它可能已经可以在 Chrome OS 上运行了。...例如检测键盘的连接: 然后，您可以在启动时或在配置更改时查询 InputManager，并根据触摸屏或者键盘的可用与否来切换控制方案。...△ 切换操作模式时，一个推荐的做法是暂停游戏并让用户使用对应的输入设备进行一次确认操作 如果您是在游戏做完后才打算支持键盘，请考虑实现下面的功能，这样可以大幅提高可用性和完成度: 技能键绑定 WASD...团队在构建游戏时考虑了各种输入方式和显示器尺寸，并确保了游戏在不同种类的设备上拥有一致的高速性能表现。
为什么移动端点击事件要加300ms延迟呢？ 早在 2007 年初，苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。...双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ ?...鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。...在页面的DOM文档加载完成后 fastClick.attach(document.body) 如果你用过FastClick在移动端，就会发现有一个体验很不好的问题，某些ios上，点击输入框想唤启软键盘，...如何解决ios input框唤启软键盘不灵敏问题？
在阻止模式中开始选择 箭头键 按指定方向移动光标 Page Up 将光标向上移动一页 Page Down 将光标向下移动一页 Ctrl + Home（标记模式） 将光标移动到缓冲区的起始处 Ctrl...对话框键盘快捷方式 按此键 执行此操作 F4 显示活动列表中的项目 Ctrl + Tab 在选项卡上向前移动 Ctrl + Shift + Tab 在选项卡上向后移动 Ctrl + 数字（数字 1 到...9） 移动到第 n 个选项卡 Tab 在选项上向前移动 Shift + Tab 在选项上向后移动 Alt + 带下划线的字母 执行与该字母一起使用的命令（或选择相应的选项） 空格键 如果活动选项是复选框...） 显示下一个或上一个项目 箭头键（位于缩放的照片上） 在照片内移动 Ctrl + 加号或减号（+ 或 -） 放大或缩小（查看照片时） Ctrl + 0 重置照片的缩放 Esc 返回到上一个屏幕 Ctrl...显示上下文菜单 Windows 10 用于辅助功能的 Windows 键盘快捷方式 辅助功能快捷方式可帮助你将电脑与键盘或辅助设备结合使用。
要在移动设备上更改字体大小，请在设备的“设置”应用中更新显示选项。 在当前网页上进行缩放 使用缩放选项可放大或缩小网页上的所有内容。 在计算机上打开 Chrome。 点击右上角的“更多”图标 。...在“缩放”旁边，选择所需的缩放选项： 放大所有内容：点击“放大”图标 。 缩小所有内容：点击“缩小”图标 。 使用全屏模式：点击“全屏”图标 。...您也可以使用键盘快捷键进行缩放操作： 放大所有内容： Windows 和 Linux：同时按 Ctrl 和 +。 Mac：同时按 ⌘ 和 +。 Chrome 操作系统：同时按 Ctrl 和 +。...Chrome 操作系统：按键盘顶部的全屏键 （也就是 F4）。 为所有网页设置页面或字体大小 您可以更改所访问网页中所有内容（包括文字、图片和视频）的大小，也可以仅更改字体大小。...在“外观”下方，根据需要进行更改： 更改所有内容：点击“网页缩放”旁边的向下箭头 ，然后选择所需的缩放选项。 更改字体大小：点击“字号”旁边的向下箭头 ，然后选择所需的字体大小。
勾选使用键盘快捷键缩放旁边的复选框。 或者，单击使用带有修饰键的滚动手势进行缩放。 启用后，该功能将立即可用。 要关闭这些功能，只需到达相同的菜单并取消选中相关框即可。...如果您选择使用滚动手势，您可以从多个修饰键中选择按住以启用缩放，然后您可以使用鼠标滚轮或触控板上的单指垂直滚动手势更改放大倍数。...在外观下，顶部提供了放大屏幕图像如何移动的选项，用户可以将其设置为随指针连续移动，仅当指针到达放大部分的边缘时，并确保指针仍然相对靠近缩放图像的中心。...其他选项包括一些功能，例如在启动时恢复缩放级别、保持缩放窗口静止而不是四处移动、跟随键盘焦点以及平滑放大的图像。 也可以将放大部分设置为反转颜色。...还可以启用键盘快捷键来调整缩放窗口大小并启用触控板手势来缩放和更改选项。 还提供了用于设置缩放范围的控件，即最大放大倍数和最小放大倍数。
你可以在sketch中使用键盘快捷键来加快你的设计过程。要使用键盘快捷键，请同时按下下列列表的所有键。有些命令只能根据你在做什么或者你选择了什么才启用，所有把命令分成了下列不同的部分。...fn → 选择下一个画板 fn ← 选择上一个画板 ⇧ ⌘ J 显示图层列表中的选择 移动和调整图层大小 移动或调整图层大小时，智能参考线和距离参数会自动显示。.../ 在图层名称中 包括导出文件夹 缩放和聚焦 ⌘ 0 缩放至100％ ⌘ 1 缩放到画布上的所有元素 ⌘ 2 缩放到选定的图层 ⌘ 3 在“画布”中居中选定的图层 Z-拖动 缩放到区域 Z-Click...放大 ⌥ Z-Click 缩小 ~（§在某些键盘上） 暂时缩小到100％ ⌃ ⌘ F 切换全屏 ⌥ ⌘ 1 显示/隐藏图层列表 ⌥ ⌘ 2 显示/隐藏检查员 ⌘ ....要添加自己的自定义快捷方式，请打开“系统偏好设置”并导航到“ 键盘”>“快捷方式”>“应用程序快捷方式”，然后单 在弹出菜单中，选择“应用程序”下的“Sketch”。您现在可以定义自定义快捷方式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
