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

今日头条屏幕适配方案落地研究

本人一直在寻找可以一劳永逸的屏幕适配方案,今日头条是选定基准分辨率,基于设备屏幕分辨率计算出新的屏幕密度进行适配,保证所有设备的显示效果一致,完美避开上面那款设备的问题。推荐给大家。...: 按最小宽度适配:100 1.5 0.8 = 120 ,图片会显示成 120px 按今日头条适配: 100 * 1.04166 = 104.166,图片会显示成 104.166 px 所以今日头条方案显示的图片就更小了...我们再来看看一个极端,显示一个 平板B 的填满宽度的图片, 768px: 按最小宽度适配:768px 1.5 0.8 = 921.6px ,图片会显示成 921.6px, 远远超出平板A的尺寸,此时开发人员需要手动干预..., 欢迎阅读学习 // * // * 任何方案都不可能完美, 在成本和收益中做出取舍, 选择出最适合自己的方案即可, 在没有更好的方案出来之前, 只有继续忍耐它的不完美, 或者自己作出改变...// * 既然选择, 就不要抱怨, 感谢 今日头条技术团队 和 张鸿洋 等人对 Android 屏幕适配领域的的贡献 // * // * ===============

1.5K50

【Android从零单排系列二十七】《Android视图控件——HorizontalScrollView》

一 HorizontalScrollView基本介绍 HorizontalScrollView是Android SDK中的一个视图容器,它允许用户在水平方向上滚动其子视图。...它可以用来展示横向的大量内容,当内容超过屏幕宽度时,用户可以通过水平滑动来查看隐藏的部分。...性能考虑:因为所有子视图都会被加载到内存中,并且在一次性渲染到屏幕上,在添加大量子视图时,应注意性能问题。...默认值为true,在子视图不足以填充水平空间时,会拉伸子视图使得水平空间被填满。 android:overScrollMode:设置滚动边界效果模式。...可选值有"default"(系统默认风格)、"insideInset"(滚动条在内部偏移位置显示)和"outsideInset"(滚动条在外部偏移位置显示)。

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

    全民K歌折叠屏适配探索

    在详情页(容器宽度固定、高度可变)情况下,折叠时:容器高宽与视频等比占满屏幕宽度,高度自适应;展开时:视频尽可能放大,但满足高度在等比情况下不会溢出最大可视范围。...异常现象与系统处理 一般来说,系统在折叠屏发生改变时,会有一些自适应的处理,其可以满足一些常规应用的展示效果,但其处理方式会导致用户体验受损。...系统更新流程 常规情况下,在屏幕折叠状态发生改变时,系统会强制重新发起一次从RootView到各个子View的测量、布局操作。...+Padding+Margin的模式,一般来说就算是有问题也不会太过于难看;在界面切换时根View会自适应为屏幕的新高宽,并进行重新的测量。...在9.0引入了Multi-resume的新特性,旨在解决该问题,让所有可见的应用均保持在活跃状态,现在也在持续优化中。

    2.5K30

    端开发技术——解密Flutter响应式布局

    在使用Flutter构建响应式布局之前,我想说明一下Android和iOS是如何处理不同屏幕大小的布局的。 1....Android的方法 为了处理不同的屏幕尺寸和像素密度,在Android中使用了以下概念: 1.1 ConstraintLayout Android UI设计中引入的一个革命性的东西是ConstraintLayout...但这并不能解决大型设备的问题,在大型设备中,拉伸或只是调整UI组件的大小并不是利用屏幕面积的最优雅的方式。在屏幕面积很小的智能手表,调整组件以适应屏幕大小可能会导致奇怪的UI。...在Android中,你可以为不同的屏幕大小定义不同的布局文件,Android框架会根据设备的屏幕大小自动处理这些布局之间的切换。...3.1.1 MediaQuery 你可以使用MediaQuery来检索屏幕的大小(宽度/高度)和方向(纵向/横向)。

    2.3K00

    大屏幕和折叠屏: 让您的 Android 游戏登上更大的舞台

    系统在检测到设备配置的变动后,会自动重启您的 Activity 并在这个过程中调用适配新设备配置的游戏资源,从而确保您的游戏在该配置下达到理想的效果。...但对于素材量很大的游戏来说,这一过程可能需要更长的时间,尤其是在涉及到状态数据的序列化和反序列化时,可能会因为大量的内存消耗而出现迟滞现象,因此您可能需要自己对这一步操作进行针对性的改进,比如让系统在特定的配置变化之后不重启...而在其他设备上,默认值则有可能是横向。请在 manifest 中指定您支持的传感器方向,让系统处理它们,从而确保您的游戏不会意外翻转。...当用户在更大的屏幕上玩游戏时,他们可能会坐得离屏幕更远,这时您需要考虑扩展、添加或更改画面 / 界面元素,以确保屏幕上的所有内容都清晰可辨。...级别 26) 或更高级别为目标的游戏可以填满整个屏幕。

    1.3K20

    提示大屏幕和折叠屏: 让您的 Android 游戏登上更大的舞台

    系统在检测到设备配置的变动后,会自动重启您的 Activity 并在这个过程中调用适配新设备配置的游戏资源,从而确保您的游戏在该配置下达到理想的效果。...但对于素材量很大的游戏来说,这一过程可能需要更长的时间,尤其是在涉及到状态数据的序列化和反序列化时,可能会因为大量的内存消耗而出现迟滞现象,因此您可能需要自己对这一步操作进行针对性的改进,比如让系统在特定的配置变化之后不重启...而在其他设备上,默认值则有可能是横向。请在 manifest 中指定您支持的传感器方向,让系统处理它们,从而确保您的游戏不会意外翻转。...当用户在更大的屏幕上玩游戏时,他们可能会坐得离屏幕更远,这时您需要考虑扩展、添加或更改画面 / 界面元素,以确保屏幕上的所有内容都清晰可辨。...级别 26) 或更高级别为目标的游戏可以填满整个屏幕。

    1.5K30

    Android中21种drawable标签大全

    多个取值可以用 | 分隔: android:antialias 设置是否开启抗锯齿 android:dither 设置是否抖动,图片与屏幕的像素配置不同时会用到,比如图片是ARGB 8888的,而屏幕是...当裁剪方向为horizontal时,会裁掉图片左右部分;当裁剪方向为vertical时,会裁掉图片上下部分 fill:拉伸整张图片以填满容器的整个高度和宽度。...裁剪和center时一样 fill_vertical:在垂直方向上拉伸图片以填满容器的整个高度。...在nest模式下第二层是从左边10dp才开始填充,而在stack模式下第二层是从左边0dp开始填充。...另外经测试,在valueFrom和valueTo中的path格式要一一对应,否则也会crash,也没有日志,我的理解是因为无法计算出动画数据。

    2.5K20

    从零开始学 Web 之 移动Web(七)Bootstrap

    Framework7 主要的作用就是让你有机会能够使用 HTML,CSS 和 JavaScript 简单明了地开发 iOS 和 Android 应用。...4、bootstrap 栅格系统 概念:Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会默认分为12列。...- : 大屏幕 大桌面显示器 (≥1200px) 注意: 1.栅格系统是往上兼容的:意味着小屏幕上的效果在大屏幕上也是可以正常显示的人,但是大屏幕上的设置在小屏幕上却无法正常显示。...如果不能填满整列,则默认从左排列,如果超出,则换行展示。 5、列排序 col-xs-offset-n:往右偏移 n 个栅格,但是会影响后面所有元素也偏移 n 个栅格。...,没有波及到其他区域) .hidden-xs :在超小屏幕下不可见 .hidden-sm :在小屏幕下不可见 .hidden-md :在中等屏幕下不可见 .hidden-lg :在大屏幕下不可见

    5.7K30

    【Android开发基础系列】Layout布局专题

    Android 视图和视图组的关系如图所示:         根据以上的原则,当屏幕需要包含多个视图时,必须组织在一个视图组中。由于视图组本身也是一个视图,因此视图组还可以包含视图组。...在 Android 中布局通常有以下几种不同的情况:         FrameLayout(框架布局):系统默认的在屏幕上就有空白区显示它;         LinearLayout(线性布局):让所有的子视图都成为单一的方向...布局的内容一般通过在布局文件中控制即可,在控制布局时android:layout_width 和 android:layout_height 等表示 尺寸属性,除了使用实际的尺寸值外,还有两个常用的选项...分别表示当 tab 的内容超过屏幕宽度是否支持横向水平滑动,第一 种支持滑动,第二种不支持。默认不支持水平滑动。...所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件会覆盖下一层的控件。这种显示方式有些类似于堆栈。

    38220

    细细品读!深入浅出,官方文档看ConstraintLayout

    这里说明一下:如果在居中方向上(横向或纵向)控件的尺寸和ConstraintLayout的尺寸一样,那么就无所谓居中了,此时约束的存在是没有意义的。...上述代码对宽度和高度都进行了约束,通过H,指定高度受约束,所以高度的尺寸会根据宽度大小按照比例得到,其效果如图所示: ?...在SPREAD CHAIN中,外边距会从已经分配好的空间中去掉。原文如下: ?...MATCH_CONSTRAINT,那么控件将会把所有剩余的空间均分后“吃掉” CHAIN_SPREAD_INSIDE Chain两边的元素贴着父容器,其他元素在剩余的空间中采用CHAIN_SPREAD模式...CHAIN_PACKED Chain中的所有控件合并在一起后在剩余的空间中居中 ?

    98340

    低代码如何构建响应式布局前端页面

    “你开发的界面为啥在我的屏幕里这么小啊?” “这个界面为啥在我这里会出现横向滚动条啊?” 大家在进行前端界面开发时,有没有遇到这些类似的问题呢?又是如何解决的呢?...页面响应式 在进行项目交付的场景中,常常会存在项目系统在不同设备,不同屏幕尺寸下使用和展示。因此在开发过程中需要针对此场景做针对性处理。...在版本的早期,活字格提供了页面拉伸的模式帮助用户将页面布局更好的适应屏幕的尺寸。...固定模式 固定模式下,行高、列宽为固定的大小,单位为像素,不会随着展示屏幕的变化而变化,如果页面所有被设定了固定模式的行列总像素已经大于了浏览器的宽度/高度,那浏览器中就会出现横向/纵向滚动条。...当对某个组件设置了自适应之后,组件会根据内部的内容动态的变化自己的高度或宽度,比如文本框,会根据输入的文字内容来动态调节自己的框体大小,附件单元格会按照数据的多少来扩展高度。

    4K40

    为 Android 应用打造精良的 Chrome OS 使用体验

    作者 / Chrome OS 团队 从发布我们的首款平板电脑和可拆分式笔记本,到在日本和德国等新市场推出 Chromebook,我们一直在努力使 Chrome OS 设备的生态系统满足如今应用用户们的需求...在 2018 年第四季度,美国销售的笔记本电脑中有 21% 是 Chromebook,同比增长 23% ²。...界面布局 如果一个应用的界面布局没有专门适配过大屏幕,那当它运行在大屏幕上时效果会非常尴尬——大量被浪费的空间,和非常不顺手的导航,这些都会让用户感到困惑。...提供纵向、横向等布局,使得应用可以根据可用的屏幕宽度,在底部导航、侧边导航和侧边扩展导航模式之间切换。...集成应用分析工具 集成分析工具允许开发者随时检测系统状态: 包括缓冲区使用、垂直同步、CPU 使用、GPU 和 CPU 频率以及系统温度,从而便于开发者定位动画卡顿和/或系统速度降低的原因。

    35810

    如何打造一个高效适配的H5

    1、contain 模式:以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容,窗口与内容的宽度比或高度比之间较小者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧出现留空部分。...2、cover 模式:以内容中心为基点按照窗口的宽高比等比缩放以适配窗口,窗口与内容的宽度比或高度比之间较大者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧超出窗口被裁剪,这种模式不会出现「contain...下面分别来介绍我在项目中的对于适配的思考和选择以及实现方法。...同样尺寸比的 Android 平台分辨率 720*1280 和 1080*1920 占比数也是最多的。...从易用性看,「fill 模式」可以精确适应窗口区域,但从视觉体验上看,宽高不等比例的拉伸会造成图片失真,同时该层的主要内容及交互操作集中在中部,不重要的边缘可以适当被裁 剪,故这里选择「cover 模式

    1K40

    如何打造一个高效适配的H5

    1、contain 模式:以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容,窗口与内容的宽度比或高度比之间较小者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧出现留空部分。...2、cover 模式:以内容中心为基点按照窗口的宽高比等比缩放以适配窗口,窗口与内容的宽度比或高度比之间较大者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧超出窗口被裁剪,这种模式不会出现「contain...下面分别来介绍我在项目中的对于适配的思考和选择以及实现方法。...同样尺寸比的 Android 平台分辨率 720*1280 和 1080*1920 占比数也是最多的。...从易用性看,「fill 模式」可以精确适应窗口区域,但从视觉体验上看,宽高不等比例的拉伸会造成图片失真,同时该层的主要内容及交互操作集中在中部,不重要的边缘可以适当被裁 剪,故这里选择「cover 模式

    1.3K50

    【Android】WebView 应用模版 ( WebView 设置 | 设置 WebSettings | 启用调试模式 | 设置 WebChromeClient )

    启用内置缩放控件可以提高用户的体验,使其更容易在移动设备上浏览网页。 如果网页已经自适应了移动设备的屏幕大小并且用户可以通过双指捏合手势来缩放网页,那么不需要启用此选项。...安全提醒 : 这可能会导致安全漏洞,因为混合内容 可以被中间人攻击者用来窃取用户的信息。...使用场景 : 如果您的 网页在宽屏幕上显示得很好,但在狭窄屏幕上缩放过大或过小,您可以启用此选项。...在宽视图端口模式下,WebView 会将页面缩小到适应屏幕的宽度。 这意味着用户在浏览网页时无需进行横向滚动,但可能会使网页缩小得过多,影响可读性。...// 设置 WebView 是否使用宽视图端口模式 // 宽视图端口模式下 , WebView 会将页面缩小到适应屏幕的宽度 // 没有经过移动端适配的网页 , 不要启用该设置

    3.2K20

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

    但是实际表现并非如此: ●小米 9 的系统浏览器表现符合预期; ●iOS 中 所有 Web 容器均无法缩放 到 比 initial-scale 更小的倍数,即使 minimum-scale 声明了一个更小且合理的取值...Android 和 iOS 在不同版本不同厂商的 Web 容器中,此属性的表现可能存在较大程度的不一致,请谨慎使用。...(device-width 对应数值在竖屏模式下为 375,横屏模式下为 667) 既然,两个属性的作用都是设置初始视口大小,那同时设置且存在冲突的情况下,浏览器会怎么处理呢?...屏幕适配无粒度区分,同一设备上做宽度变化时,内容布局无缝圆滑变化;技术实现通常为,一套代码适配所有屏幕。 自适应。...如上图,布局伸缩式适配需求,常见于排版比较简单的信息流展示类业务。 其布局特点一般为横向伸缩,竖向高度固定或由内容填充决定;文字图标等网页内容一般会固定大小,且在宽屏窄屏上的视觉大小保持一致。

    3.4K20

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

    但是实际表现并非如此: ●小米 9 的系统浏览器表现符合预期; ●iOS 中 所有 Web 容器均无法缩放 到 比 initial-scale 更小的倍数,即使 minimum-scale 声明了一个更小且合理的取值...Android 和 iOS 在不同版本不同厂商的 Web 容器中,此属性的表现可能存在较大程度的不一致,请谨慎使用。...(device-width 对应数值在竖屏模式下为 375,横屏模式下为 667) 既然,两个属性的作用都是设置初始视口大小,那同时设置且存在冲突的情况下,浏览器会怎么处理呢?...屏幕适配无粒度区分,同一设备上做宽度变化时,内容布局无缝圆滑变化;技术实现通常为,一套代码适配所有屏幕。 自适应。...如上图,布局伸缩式适配需求,常见于排版比较简单的信息流展示类业务。 其布局特点一般为横向伸缩,竖向高度固定或由内容填充决定;文字图标等网页内容一般会固定大小,且在宽屏窄屏上的视觉大小保持一致。

    3.1K30

    如何在flutter中构建响应式布局(第五节)

    在继续在 Flutter 中构建响应式布局之前,我想说明一下 Android和iOS如何处理不同屏幕尺寸的原生布局。...安卓方法 为了处理不同的屏幕尺寸和像素密度,Android 中使用了以下概念: 1. 约束布局 在 Android 世界中引入的用于 UI 设计的革命性工具之一是?ConstraintLayout。...[ 在 Android 中,您可以为不同的屏幕尺寸定义 单独的布局文件,Android 框架会根据设备的屏幕尺寸自动处理这些布局之间的切换。![ ?随时了解应用开发新闻 3. 片段 使用?...屏幕的大小(宽度/高度)和方向(纵向/横向)。...), ); } } 在这里,我使用OrientationBuilder了LayoutBuilder来breakpointWidth根据方向改变 ,因为我不想PeopleView在处于横向模式时在小屏幕手机上显示

    2.9K10

    【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现

    ()方法 是获取不到组件的宽度和高度的, 这两个方法返回的是0, Android的运行机制决定了无法在组件外部使用getHeight()和getWidth()方法获取宽度和高度; 组件内可以获取 : 在自定义的类中可以在...使用ImageView添加(低版本3.0以下) 垂直布局 横向宽度填满 : 如果布局是vertical, 那么设置一个ImageView宽度fill_parent, 高度2dp, 设置一个背景色; 水平布局...绘制霓虹灯布局 绘制一个霓虹灯效果的层叠布局, 如下图 :  要点 :  后挡前 : 后面的View组件会遮挡前面的View组件,越在前面, 被遮挡的概率越大; 界面居中 : 将所有的TextView...拉伸 :Stretchable, 如果某列被设为Stretchable, 那么该列所有单元格的宽度可以被拉伸, 保证表格能完全填满表格剩余空间; d...., 沿长宽方向排列的像素,密度低的屏幕像素少,密度高的屏幕像素多; 如果以像素为单位, 同一个按钮在高密度屏幕 要比 在低密度屏幕要大.

    2.5K40

    Android适配全面总结(一)----屏幕适配

    由于Android是开源的,不同的手机厂商有自己定制的ROM,对系统的api可能有变更,也有可能新增一些api,所以在开发中,要针对不同厂商的手机做一些特殊适配。...在平板电脑和电视的屏幕(>7英寸)上:实施 双面板 模式以同时显示更多内容,它会加载res/layout-large里面的布局,在手机较小的屏幕上:使用 单面板 分别显示内容,加载的是res/layout...根据屏幕方向进行布局的调整。   某些布局会同时支持横向模式和纵向模式,但我们可以通过调整优化其中大部分布局的效果。...例如,在运行 Android 3.0 或更高版本的标准 7 英寸平板电脑上,如果新闻阅读器示例应用运行在纵向模式下,就会在使用独立Activity 显示新闻报道;但如果该应用运行在横向模式下,就会使用双面板布局...2.必须尽可能多的包含所有分辨率,因为这个是使用这个方案的基础,如果有某个分辨率缺少,将无法完成该屏幕的适配 3.过多的分辨率像素描述xml文件会增加软件包的大小和维护的难度 ★ 1.

    2.2K40
    领券