专为大屏幕设计的应用无疑能够为用户提供更多助力。可以观看 可折叠设备，平板电脑和大屏幕更新一览 了解更多详情。 可折叠的屏幕也为大型设备提供了更好的人机工程学效果。...用户可以并排比较两个产品，在写文档时参考笔记，或者在规划事件时保持日历可见 输入模式 由于许多人使用大屏幕来提高生产力，平板电脑应该支持基本的键盘、鼠标和手写笔输入。...△ SlidingPaneLayout 会自动适应配置的变化，在不同的布局尺寸下提供良好的用户体验 在较小的屏幕上不得不堆叠起来的 UI，在大屏幕上则可以轻松实现并排布局。...它还会提供这些特性如何影响应用的信息，方便您创建最佳体验。比如，当用户一边观看视频一边把设备折叠成桌面模式时，您可以对可折叠设备的状态变化做出响应。...我们在 Google Play 上看到越来越多的应用正在把握大屏幕带来的机遇。例如，Google Duo 实现了对平板电脑和可折叠设备的支持，以提升用户体验，在这之后其应用评分和用户粘性均有增加。
△ 大屏幕设备正在逐步成为主流 1 亿新增 Android 平板电脑数据来源: 2021 年第二季度: IDC 单季度个人计算设备跟踪 一直以来，我们都与开发者紧密合作，及时了解他们针对大屏幕开发的需求以及上游设备制造商的实时动向...随着市场上此类设备数量逐渐增加，您可以更进一步，不仅使应用能够兼容大屏幕，而且在应用正在运行的情况下，当用户折叠或展开设备时，应用能够适配设备不同的状态。...同时，如果在较小的屏幕上开启应用，并且在设备折叠之后，我们不希望在顶部显示空白页。 我们在库中添加了一个专门的选项来支持占位符的使用场景，来一起看一下如何在应用中集成该功能。...兼容性模式 △ 兼容性模式 在大屏幕平板电脑 Chromebook 或外接显示器上运行仅针对小尺寸竖屏 Android 手机设计的应用时，如果拉伸进入全屏视图，那么应用外观和性能可能会差强人意。...像平板电脑和可折叠设备一样，Chrome 操作系统现在也有了兼容模式，针对小屏移动设备设计的应用可在手机尺寸或平板尺寸的窗口中显示。
另一个需要考虑的重要问题是字体大小在大屏幕上的表现，例如 27” iMac。会发生什么呢?你猜对了，字体大小为95px左右，这是一个很大的值。...粘性布局(footer) 在大屏幕上，网站内容有时候很少，footer 没有粘在底部。这很正常，也不被认为是一种不好的做法。但是，还有改进的余地。考虑下面代表问题的示图： ?...在我的职业生涯中，我没有使用固定高度的页脚，因为在例如不同的屏幕尺寸下，此footer是不可行的。...响应式元素 假设我们有一个作品集来展示我们的响应式设计工作，并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。每个设备包含一个图像。目标使用 CSS 来响应适配这些页面。 ?...当视口较小（移动）时，通常会减少padding 。 通过使用vmin，我们可以在视口较小尺寸（宽度或高度）的基础上获得合适的顶部和底部 padding。
Android 的覆盖范围在递增，体验也在变得越来越好，现已有超过 2.5 亿台大屏设备搭载了 Android 系统，包括平板电脑、可折叠设备以及 Chrome OS 设备。...本文将重点介绍 Material Design 指南中更新的相关内容，并提供一些建议来帮助开发者按照自适应界面的原则来构建应用，从而解决在平板电脑和可折叠设备上的适配问题。...△ Fortnightly 遵循指南对内容进行分隔和分组 网格系统 现在，许多应用将屏幕视作一个大画布或单栏，以水平和垂直的方式按相互关系绘制元素，有些应用也会在一侧整体留出边距。...关注设备的形状和尺寸，有助于您打造出更加人性化的体验。例如，在平板电脑或大屏手机上，如果不完全调整握持姿势，人们可能很难触及屏幕的顶部区域，因此请将重要操作和内容放在容易触及的区域中。...例如，这里使用的是 Pixel C 平板电脑镜像，接下来 Gradle 会创建能够在指定设备上执行测试的目标，甚至还能根据需要下载设备镜像。
大屏手机填补了传统触屏手机与平板电脑之间的空白地带，有些大屏手机的屏幕甚至达到7英寸之巨，因此也获得了一个略显蹩脚的绰号——平板手机。 ? 这类设备虽然有着巨大的身形，但人们仍然会将其作为手机使用。...虽然根据Android设计规范的要求，我们应该在小屏手机中将App的导航与功能控件放置在顶部，以避免与底部的系统导航栏产生冲突，但是在大屏设备上，可以将一些高频控件从标准的Action Bar中移出，并放置到屏幕底部...可以通过屏幕底部的悬浮按钮触发更多功能，同时避免与Android的系统导航栏产生大范围的冲突。 此外，也可以尝试将控件放置在顶部，但使其能够响应某种作用于屏幕下方的辅助交互形式。...我总会在用户研究中观察到这样的现象：对移动设备上的网页，除非用户在主要内容区域实在无法找到自己需要的信息，否则他们几乎不会想起主导航。...你也可以为这种模式添加横滑展开的手势，只要不与界面整体的横滑回退效果产生冲突即可。总体上讲，功能控件位于屏幕左右边缘的模式更适用于双手拇指同时操作的情况，因此在平板电脑的界面中更为常见。
在多任务处理方面，大屏幕提供给用户更多空间进行多项操作，如果用户在折叠设备上使用应用，开发者要考虑优化的是当用户展开设备时确保应用有良好的连续性、良好的界面显示效果和外观。...MAD Skills 系列之导航组件系列文章 支持不同的屏幕尺寸 问: 对开发者而言，如何用最简单的方法在各种尺寸的屏幕上优化应用界面？...问: 对开发者而言，应该在平板电脑或可折叠设备上使用底部导航吗？...二级导航也很重要，在移动设备中您可以使用标签页 (Tab) 或分段按钮 (Segmented Button) 等来实现二级导航，这些方法同样适用于可折叠设备，因此可以把它们与 Navigation Rail...类似 Chromebook Duet 这种可拆卸平板电脑有哪些需要注意的？
典型的桌面屏幕分辨率：1920x1080 典型的便携屏幕分辨率：1366x768 典型的平板屏幕分辨率：1920x1200 典型的移动屏幕分辨率：360x640 手机屏幕分辨率说明 由于手机屏幕尺寸过小...screen 用于电脑屏幕，平板，智能手机等。...对于流量较小的网站，平台的兼容策略主要是应用响应式框架(比如：normalize.css、Bootstrap 等)，加上移动端主菜单与导航栏即可，其次可以选用跨平台框架来实现在不同平台的差异化体验。...解决方案：{display: inline-block; *display: inline;} 7、cursor兼容问题 解决方案：统一使用{cursor: pointer;} 8、相邻元素设置margin边距时...，margin将取最大值，舍弃小值 解决方案：不让边距重叠，可以给子元素加一个父元素，并设置该父元素设置：{overflow: hidden} 9、li中内容超过长度时，用省略号显示 li{ width
在较大的设备上显示文本时，应留有可读性页边距。这些边距使文本行足够短，以确保舒适的阅读体验。 适应上下文的变化 在上下文变化期间确保聚焦在当前内容。内容是APP中优先级最高的。...将控件放在屏幕的顶部和底部时，请使用匹配的插图，并在“Home”指示器周围留出足够的空间，以便人们在尝试与控件进行交互时不会意外地将其作为目标。...由于“Home”指示器仍在屏幕上居中，因此它相对于应用程序界面的位置可能会发生变化。 插入全角按钮。延伸到屏幕边缘的按钮可能看起来不像按钮。遵守全角按钮两侧的标准UIKit边距。...请勿尝试通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或用于访问主屏幕的指示器。也不要使用诸如括号、边框、形状或说明文字之类的视觉装饰来引起对这些区域的特别注意。 注意状态栏的高度。...即使你的APP在其他平台也可以使用，也要避免通过过分关注一致的品牌却削弱了你的设计。 不要让品牌盖过内容。在屏幕顶部显示一个固定的栏，除了显示品牌资产外什么也不做，这意味着查看内容的空间较小。
另外一个特别的功能是，对隐私比较重视的人们会喜欢，在屏幕顶部当前网站地址旁边会显示出的安全等级。网站根据其加密级别和检测到的跟踪器数量被评级为D到A。...就如同在 Windows 10 设备上的 Edge 浏览器，由于同一家公司制造，Safari 在 Apple 设备上运行良好，并且从底层设计来运行在特定的一组硬件上。...用户也可以通过在浏览过程中启用 Brave 的广告来获得 BAT。 Brave 可用于 Windows，Mac 和 Linux 计算机，此外还有 iOS 和 Android 的智能手机和平板电脑。...，专为 iOS 和 Android 平板电脑和智能手机设计。...你也可以把工具栏移动到顶部、底部或者侧面，还可以将网页固定在侧边以便同时浏览。如果你喜欢边浏览网页边观看 YouTube 视频或者查看社交媒体网站，后一个功能特别有用。
服务开发者，让开发者为用户创造更大的价值才是长久之道。 除此之外，随着移动设备的生产力逐步加强，手机、折叠屏、平板、电脑之间的界限变得模糊，端与端的差距也在缩小。...全平台设计的原则 此时此刻，一个腾讯文档的白领用户可能正在工位写报告或通勤的路上查阅文档，一名学生可能在电脑上写论文或者去打印店打印，一位老师则可能刚刚发了一份在线统计表格到群里让各位家长在手机上填写。...效益最大化的三个维度 1. 平台环境 1.1 屏幕尺寸 电脑、平板、手机的基础布局差异；异形屏、折叠屏，手机的横竖屏，浏览器窗口的拉伸适配。...用户通常为单手手持设备，因此我们将主导航下移使得更容易点击。此外在框架上预留了语音，拍照等快捷创建内容的入口规划。 平板端 在交互方式上和手机很相似，但更大的屏幕尺寸允许用户实现轻量的多任务。...以下图的平板界面为例，它实际上由一个列表页 (紧凑布局) 和详情页 (宽松布局) 组合而成。在手机端显示时，每个子页面则成为一个独立的页面，继续根据尺寸判断布局策略即可，无需重新定义间距。 3.
应用在大尺寸屏幕 (平板、可折叠设备甚至是 Chrome OS 和台式个人电脑) 上的使用体验是我们的关注点之一: 在过去的一年中，大尺寸屏幕的设备越来越受欢迎，用户使用率也越来越高，如今已增长到 2.5...响应式导航 在平板电脑这类宽屏幕设备或者横屏手机上，用户们通常握持着设备的两侧，于是用户的拇指更容易触及侧边附近的区域。同时，由于有了额外的横向空间，导航元素从底部移至侧边也显得更加自然。...这个回调会监听滑动窗格的移动以及关注各个窗格导航目的页面的变化，因此它能够评估下一次按下返回键时应该如何处理。...当前在窄屏幕设备上，如果详情页正在顶层，尝试将其滑出。 if (!...但我们想要充分利用额外的屏幕空间，而不是限制显示内容的宽度。在窄屏幕设备上，您会看到一列项目，它们会在点击时展开或折叠。
用户的视频消费习惯越来越多元化：长短兼而有之，横竖各有场景，手机平板电视电脑诸多终端并存，免费/付费/会员兼而有之……未来，这样的多元化会进一步加剧：随着5G、4K/8K和VR/AR等技术的成熟，更多影音设备...一般来说，用户在平板、电视和电脑上观看视频时都是横屏。影视剧、综艺、体育赛事等等长视频内容，部分短视频如Vlog、Papi酱、李子柒等网红PGC内容，均以横屏观看为主。...最近我在爱奇艺极速版时发现一种新的解决思路：在“沉浸”频道横屏内容右侧中间位置，有一个“沉浸”按钮。点击之后，我看到的横屏短视频即刻转换为聚焦视频关键人物和场景区域的竖屏沉浸式短视频。...这几天体验了一下，感觉很新鲜，我在竖屏看一个视频花絮时，点击“沉浸”后在竖屏画面就会看到关键人物，这样竖屏观看横屏内容时，画面放大到全屏了，感觉到手机画面中的明星人物都离着自己更近了。...理论上来说，爱奇艺“具备智能主体识别能力的竖屏沉浸式播放技术”这一技术，应该也可以将现在竖屏短视频转化到横屏模式下，让用户在电视、平板等设备上横屏观看竖屏短视频时，体验更好。
——不仅在手机上，还有电视、汽车、平板电脑、手表等。...请观看 "应用性能更新介绍" 演讲视频，或阅读 文章 了解详细信息。 更好的协作 #4: 大力发展 Android 平板电脑 Google 正在平板电脑领域全力以赴。...#8: 跨设备提供语音功能 为了帮助用户更方便地通过 Google Assistant 在不同设备上通过语音调用应用，我们正在将快捷方式 (Shortcuts) API 的支持添加到 Android for...此外，我们正在引入改进措施，让用户能通过语音在移动平台上更容易发现您的应用，首先是通过去 品牌查询 (Brandless Queries)，即使用户没有明确说出您的应用的名称，也能推动应用的使用，以及在您的应用尚未安装时给出应用安装建议...只需使 用受支持的 Pixel 设备注册参加测试，或者在我们的合作伙伴的部分型号的手机、平板电脑和可折叠设备上体验 Android 13。请访问 Android 13 开发者网站 了解更多。
一个很好的例子是 Google Duo 团队 对其应用进行的优化，从而使该应用在平板电脑和可折叠设备上均能运行良好。...当设备完全展开时，整个屏幕都会被用于显示主 PlayerView。 最后的问题: 当设备折叠时，您应该将 ReactiveGuide 移动到哪里？...如果您要实现横屏功能，那么大多数时候，边界会以一个在屏幕中垂直居中的矩形来表示，它和屏幕一样宽，并且高度与铰链相同 (对于可折叠设备而言值为 0，对于双屏幕设备而言会是两个屏幕之间的距离)。...在其他的所有情况下 (非全屏) 您需要考虑导航栏或屏幕上其他 UI 组件占据的空间。 为了移动参考线，您必须指定它距离父布局底部的距离。...，您学习了如何通过实现支持桌面模式的灵活布局来改善可折叠设备上媒体应用的用户体验。
那么，如何解决这个问题呢？我们准备了一张流程图帮助大家快速做出决策: △ 请点击图片放大查看 注解: 非粘性沉浸模式: 用户可以通过在系统栏上滑动来退出沉浸模式。...但是，当用户尝试快进和快退歌曲时，会发生这种情况: 发生这种情况是因为，屏幕底部的系统手势交互区域与进度条重叠了，而在这里系统手势优先级更高。...因此，除了直接修改视图的边距，我们还可以修改布局，以避免出现空间浪费: △ 将进度条移到视图的顶部 在这里，我们将进度条移到了播放控件的顶部，完全移出了手势交互区域。...而且这样做还使得我们不再需要额外插入太多无用的边距。...我们认为，开发者需要尽量确保用户使用一致的操作来与系统进行交互，如从边缘向内滑动进行返回。注意是在整个设备上，而不仅仅是在一个应用中保持一致性。
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。...开发方式 移动web开发+PC开发 响应式开发 应用场景 一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端。...移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务器，返回不同的页面。 2 响应式开发的原理？...768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 但是我们也可以根据实际情况自己定义划分情况。... 响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
定义字体文件的 URL。 2D转换 transform: translate(X,Y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。...animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 animation-play-state 指定动画是否正在运行或已暂停 多列...否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。...space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。...对媒体类型 all 用于所有多媒体类型设备 print 用于打印机 screen 用于电脑屏幕，平板，智能手机等。
Coreyak就是这样一台创新的家用健身机。Coreyak配备了无线运动跟踪设备，可以将手柄连接到电视屏幕、Google Cardboard或其他VR头显设备上，让用户完全沉浸在VR视频中。...所以，如果你已经厌倦了在跑步机上跑步或在一个不舒服的座位上骑自行车，你不妨尝试下Coreyaking。...为了让用户正确的进行模拟皮划艇和划船练习，Coreyak配有一个配套的指导程序，该程序还能够跟踪用户的划船距离、力量和姿势，所有的信息都将显示在用户的手机或平板电脑上。...Coreyak团队解释道：“桨的运动通过无线运动跟踪单元进行跟踪，并传输到我们的智能手机、平板电脑或基于智能手机的VR头显开发的应用程序中，也可以直接连接到电视机的大屏幕上显示。...用户在Coreyak上的移动与屏幕上显示的移动动作是同步的。”
它完全重写了Bootstrap程序库，并成为了一个响应性的框架。它的组件兼容各种设备，包括移动设备、平板电脑和桌面设备，以及许多新的CSS和JavaScript插件。...开发人员可以创建一个单一的设计，让它可以工作在任何类型的设备上:移动设备、平板电脑、智能电视和个人电脑。 响应式网页通常是流畅的，他们根据屏幕的大小来调整自己，并且与移动设备的触控界面兼容。...然后我们有两个更大的帖子放在小的帖子下面。最后，我们有一个页脚部分，其中有简单的版权文本。 很明显，我们无法轻易地在平板电脑和手机上看到这一页，因为它无法正确地适应屏幕。设计需要为这些用户定制。...我们已经使用它的网格系统来创建响应式设计，这样布局就会自动调整以适应平板电脑和移动设备。 在平板设备上，布局将如图所示。广告已经被隐藏在标题部分，并且标志已经居中了。布局非常完美。 ?...更大的帖子现在被放置在每一个帖子的顶部(第二大的帖子在屏幕的底部)。 ? 这是一个非常基本的关于响应式设计的行为的概述。显然，我们可以做的比前面提到的例子要多得多。
英文原文：https://frontendfoc.us/link/82281/web 授权译者：ConardLi 当你正在纠结选择什么样的字体大小，尤其是在您尝试适应不同的屏幕和场景时。...这种设计可以吸引您的时间，而不是浏览文本。 虽然这种设计可以在较小的屏幕（尤其是智能手机和平板电脑，在我的测试中）上提供良好的阅读体验，但我发现在较大的屏幕上很难。...我在阅读时有一定程度的注意力不足，当我尝试滚动阅读时，此设置消除了很多视觉环境；我通常会尝试通过选择我正在阅读的所有其他段落来解决注意力不足的问题，但是当设计一次只显示一个或两个段落时，这没有帮助。...我喜欢从100%的小屏幕开始，然后在大屏手机或平板电脑上使用(比如 110% 或 115%)，在笔记本电脑和大屏幕上使用可能达到 125%。...然后，根据我使用的字体、我想要的外观以及我在各种设备上测试的结果，我调整这些值。 对于我们一直在追逐设备制造商，操作系统和浏览器开发人员，并试图每两年调整字体大小以适应市场上的情况，我也感到难过。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
