文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

两个 viewports 的故事-第二部分

对于一个基于桌面优化的网站，移动浏览器的显示效果明显不如桌面浏览器，要么缩小后文字太小无法阅读，要么放大后只能看到网站的一部分。...两个viewports 所以视图太窄而不能作为你 CSS 布局的基础。很明显解决方式就是让视图更宽一点，我们要将视图分为两部分：视觉视图和布局视图。...这个小相框的周围是不透明的材料，你只能看到相框内的图片。你从相框内看到的图片就是视觉视图。你可以拿着你的相框远离图片来看整张图片（缩小），或者离近一点只看图片的一部分（放大）。...但是，如果页面由于设置了绝对宽度而不能放入 visual viewport 中，那么浏览器会把layout viewport 拉伸到最大 850px 宽。...大多数浏览器会通过缩小来在屏幕上显示整个布局视图，如下图的效果 ? 所有的用户会立即放大查看，但是大多数浏览器会保持元素的宽度不变，这使得文本很难阅读。 ?

2.7K70
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    哎呀，当时怎么没有想到

    导读 在我们的测试工作中，是不是经常遇到这样的情形，发生了线上问题，产品、研发或者测试同学一拍脑袋：当时怎么没有想到，怎么给漏掉了呢？...明明是一个非常简单的事情，用大拇指都能想到的验证场景，为何当时就漏测了呢？...针对此类问题，从测试覆盖度的角度，本文试图解释一下为何会发生这样的事情，以及如何有效规避。...客观原因 项目周期紧凑：目前很多需求都无法按照研发测试的正常排期进行交付，倒排期和赶工是常态，测试很难有充分的时间思考验证场景，新功能的测试往往只能覆盖主要路径，而忽略了一些边界情况和异常场景。...，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

    69210

    用两张图告诉你，为什么你的App会卡顿?

    且看下图✌️ 这个图可能和伙伴们在书上或者网上常见的不太一样，为什么不太一样呢？因为是我自己画的，哈哈哈... 下面就来看着图捋一捋Android最基本的视图框架。...栅格化，这样才能在屏幕上成像。...在使用硬件加速后，GPU会分担CPU的计算任务，而CPU会专注处理逻辑，这样减轻CPU的负担，使得整个系统效率更高。...当然它不是一直不停的在产生，这样会导致Vsync信号的接收者不停的接收到绘制、渲染命令，即使它们并不需要，这样会带来严重的性能损耗，因为进行了很多无用的绘制。所以它被设计设计成能够唤醒和睡眠的。...可以看到，当一个Vsync信号到来时，SurfaceFlinger和UI绘制进程会同时启动，导致它们竞争CPU资源，而CPU分配资源会耗费时间，着降低系统性能。

    2.5K91

    开发 | 掌握这 7 个要点，iOS 开发者也能快速入门小程序

    同样，创建项目的时候微信提供了一个模板，打开项目即可看到实时预览的效果。不过这里有一个比较坑的问题是，启动开发者工具时，不能链接 V**。...直接上代码： WXML 文件： WXSS 文件： 看到了吗，就需要这么几行代码，而且图片也会自动加载、自动等比缩放。是不是觉得很简单呢？...WXSS 负责每个视图的样式，比如字体大小等样式。 JS 监听并处理小程序的生命周期函数、声明全局变量，数据都在这里。 布局简单：创建界面的时候，微信小程序更加简单，而且会自动适配屏幕。...系统提供了常用的控件：系统提供了我们常用的控件，这样，搭建界面的时候会省很多事。 既然布局这么简单，iOS 方面会不会也有这中布局方式？果不其然，我找到了 Yoga。...当然如果你有 RN 或者前端开发经验，学习小程序会更容易。 那么移动端开发者，如何学习小程序开发呢？我建议读者，先学习一下 JavaScript、CSS 和 HTML。

    1.5K30

    大白技术控 | Windows10X 模拟器简单上手体验

    我们可以简单地理解为是一种树状视图，有些时候你还能在开始菜单里看到文件夹并打开它。 而 Windows10X 的开始菜单则是一种更为综合的东西。...在过去的树状图中，图标的优先级并不高，我们往往会通过程序名字来识别程序，这样做的好处是，同等高度下，旧开始菜单的信息密度是新开始菜单信息密度的数倍。...你打开的应用会显示在这里，经过测试，目前在这个模拟器上，竖屏时最多显示5个应用，横屏时是8个，所以下面的 Dock 栏图标个数是会随着屏幕宽度而变化的。...使用哪个屏幕的开始菜单打开应用，应用就会出现在哪个屏幕上。这样一来，当打开多个应用时，应用窗口就会堆叠。我很好奇当堆叠时，下层的应用是否还会继续运行，经询问之后，给出的答案是否定的。...不过目前还没有足够的文档支撑我对其进行把玩，所以只能留到以后体验了。 其它想法 经过把玩，目前我对于 Windows10X 的定位有了一个大概的概念。

    4.9K20

    构建我的Presentation层

    我之所以写这篇文章是因为看到有大量的工程从已有代码迁移到MVP结构时，对于什么该属于presentation层，什么该属于UI层的划分不清晰。我在之前的项目中看到一个评论：“我不能修改业务逻辑”。...打开一个新的activity，然后，问题来了，我之前说过我的presentation层是纯java的，所以我不能使用任何Android相关的东西，这如何实现呢？使用抽象。...RecommendedPlayLists可能需要访问网络来为当前用户获取推荐播放列表，那显然有必要为presenter创建一个自定义视图来实现它。这样就可以复用了。那么浏览菜单呢？...也许这三步会整合到一起因为你的屏幕足够大。那如果是一个web应用呢？会不会因为你看到了不同的设计就认为是不同的实现方式呢？...想象一下，如果我们旋转屏幕，我们的presenter是无状态的那么列表会重新加载。你如何解决？其实很简单，创建一个内存缓存或者磁盘缓存来存储之前获得的数据，并且设定好失效时间。

    17110

    iOS开发-视图渲染与性能优化

    我假设你是一个这样的开发者： 了解OpenGL ES； 了解view hierarchy； 了解instruments； view hierarchy和instruments网上资料很多，OpenGL...在屏幕上显示视图，需要CPU和GPU一起协作。一部数据通过CoreGraphics、CoreImage由CPU预处理。最终通过OpenGL ES将数据传送到 GPU，最终显示到屏幕。...更新内容时，会启用离屏渲染，所以更新代价较大，只能用于静态内容；而且如果光栅化的元素100ms没有被使用将被移除，故而不常用元素的光栅化并不会优化显示。...遇到性能问题，先分析、定位问题所在，而不是埋头钻进代码的海洋。 ? 性能优化实例 1、阴影 ? 上面的做法，会导致离屏渲染；下面的做法是正确的做法。 2、圆角 ?...（切换上下文会产生idle time） 3、工具 使用instruments的CoreAnimation工具来检查离屏渲染，黄色是我们不希望看到的颜色。 ?

    2.5K70

    开源跨平台移动项目Ngui【视图与布局系统】

    【CSS样式表规则及用法】 Ngui API 文档 视图View 在上一篇中我已经为大家讲了Ngui入门，今天我就来介绍ngui的核心部分（视图与布局）。...有这么多视图它到底能为我们做什么呢？...center_reverse left right center 很好理解 left_reverse right_reverse center_reverse 是在对齐的基础上将内容颠倒排列， 如：对Ngui进行颠倒排版会变成这样...TextNode为Span的子类型，但它有实体它也是个叶子视图，也就是它不能再存在子视图。...Text继承于Hybrid与TextNode一样也是叶子视图不能存在子视图 Indep 独立的Div，相当于html-css中的绝对定位，它存在于Div与Hybrid内部时，会进行独立排版，不会影响其它兄弟视图的排版位置

    1.7K90

    Visual Studio Code 1.72 正式发布

    树状视图中的搜索结果：在列表或树状视图中查看搜索结果 你现在可以以树状方式查看搜索结果了，只需点击搜索视图上角的列表 / 树状图标，就可以在列表和树状视图之间进行切换。...当命令映射到用户可能会采取的一组操作时，就可以使用快速修复。 例如：当 Git 命令输入错误时，Quick Fix 会建议类似的命令。...这是一个繁琐的过程，如今用户不再需要这样操作。...无论是像 Git 或 Docker 这样的工具，还是对 Go 或 Java 这样的编程语言的支持，你都可以查看可用功能的列表，并将它们添加到你的 devcontainer.json 中。...如果你看好一个事情，一定是坚持了才能看到希望，而不是看到希望才去坚持。相信我，只要坚持下来，你一定比现在更好！如果你还没什么方向，可以先关注我，这里会经常分享一些前沿资讯，帮你积累弯道超车的资本。

    2.2K30

    线上问题处理案例——出乎意料的数据库连接池

    01 问题描述 在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？...，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。...8、 反向思考，为何只有在大促期间才发生问题？ 图4 平时和大促时回收频率对比 可以看到平时由于业务量小，GC不频繁，过期连接没有达到进入老年代阈值，在年轻代被回收。...，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。...，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

    90120

    Core Animation Programming

    视图在屏幕上可以是一个矩形块,它能够拦截类似鼠标点击或者触摸手势等用户交互方式. 并且在层级关系上可以互相嵌套,一个视图可以管理它所有的子视图的位置等.在开发项目过程中,这是非常常见的一个使用场景....苹果为何要如此设计?为何不用一个简单的层级来处理所有的事情. 其实原因在于职责分离,这样可以避免很多重复代码....这就是为何iOS开发界面使用UIKit 和UIView ,而Mac OS 开发界面使用AppKit 和 NSView....因为他们之间的用户交互手段不一样.但是它们在功能上是非常类似的,所以都有CALayer ,而CALayer 只处理显示上的需求,不做交互上的需求处理.这样设计就可以减少非常多不必要的代码....图层不能处理触摸事件,同样也要视图不能做的事情: 阴影,圆角,颜色边框 3D变换 非矩形范围 透明遮罩 多级非线性动画 CALayer's function 除了CALayer 类,CoreAnimation

    1.9K10

    开源跨平台移动项目Ngui【视图与布局系统】

    Ngui【CSS样式表规则及用法】 Ngui API 文档 视图View 在上一篇中我已经为大家讲了Ngui入门，今天我就来介绍ngui的核心部分（视图与布局）。...有这么多视图它到底能为我们做什么呢？...center_reverse left right center 很好理解 left_reverse right_reverse center_reverse 是在对齐的基础上将内容颠倒排列， 如：对Ngui进行颠倒排版会变成这样...TextNode为Span的子类型，但它有实体它也是个叶子视图，也就是它不能再存在子视图。...Text继承于Hybrid与TextNode一样也是叶子视图不能存在子视图 Indep 独立的Div，相当于html-css中的绝对定位，它存在于Div与Hybrid内部时，会进行独立排版，不会影响其它兄弟视图的排版位置

    95920

    iOS各种调试技巧豪华套餐

    我为什么讲这个故事呢？...你是不是想问博主为何那么风骚，竟然上了Swift了！！我此刻只想吟一首湿：别人笑我太淫荡，我家住在黄鹤楼。 反正这个年代大家都是吃饱了撑着的，博主也是，所以就学学Swift咯。...这样只有遍历到c==“H”的时候 断点才会被触发。 图10 ? 是不是很棒呢！ 有些童鞋的钛合金狗眼已经看到了编辑断点那里有一个Action的东西，那是什么呢？...没错，这样其实就是最简单爆炸的跟踪生命周期的方法了，不过系统自己的NSLog真心有点羸弱，输出的信息太少，根本就不能满足我们的欲望，这里我教大家强化你的Log！！...这样一来，不同视图间的间距变大了，层次也更加清晰，我们看到在图片"下方"还隐藏着另一个视图，选中隐藏的视图，它就是"丢失"的视觉效果视图。 图32 ?

    2K20

    iOS各种调试技巧豪华套餐

    我为什么讲这个故事呢？...你是不是想问博主为何那么风骚，竟然上了Swift了！！我此刻只想吟一首湿：别人笑我太淫荡，我家住在黄鹤楼。 反正这个年代大家都是吃饱了撑着的，博主也是，所以就学学Swift咯。...这样只有遍历到c==“H”的时候 断点才会被触发。 图10 ? 是不是很棒呢！ 有些童鞋的钛合金狗眼已经看到了编辑断点那里有一个Action的东西，那是什么呢？...没错，这样其实就是最简单爆炸的跟踪生命周期的方法了，不过系统自己的NSLog真心有点羸弱，输出的信息太少，根本就不能满足我们的欲望，这里我教大家强化你的Log！！...这样一来，不同视图间的间距变大了，层次也更加清晰，我们看到在图片"下方"还隐藏着另一个视图，选中隐藏的视图，它就是"丢失"的视觉效果视图。 图32 ?

    2.7K90

    聊聊iOS开发之MVVM的架构设计

    - view 和 view controller 都不能直接引用model，而是引用视图模型（viewModel） - viewModel 是一个放置用户输入验证逻辑，视图显示逻辑，发起网络请求和其他代码的地方...而不是ReactiveCocoa、RXSwift或RXJava等。 而在现实中我倾向于使用 block而不是 KVO，因为KVO的代码量太大了，block则简洁的多。...想必大家可能对下面的代码存在疑惑，原因可能是：不是说好的 View绑定ViewModel的呢？绑定呢？监听呢？.......在工作中如果遇到量级非常重的控制器，可以针对实际的业务，将一组业务逻辑相关的代码抽取到一个独立的视图模型中处理。你可用子viewModel 来代表屏幕上更小的、更潜在的被封装的部分。...但是本文可能也存在错误之处，或者不足之处，希望大家看到有问题的地方在下方留言一起谈论学习，后续可能会持续更新更正本文。

    9.6K92

    Android触摸事件机制

    每天我们对着手机重复的做着点击、滑动操作，而手机则随着我们的操作给我们展示她的精彩。 … 废话到此结束。 看到这里，即使不是作为移动端码农的你也应该知道触摸事件对手机（经典键盘机除外）的重要性了。...接下来触摸事件ev会传递给Activity窗口绑定的根视图rootView（View/ViewGroup），如果根视图也有子视图，事件ev会一级一级的分发下去，如果在这个过程中ev被消耗了，事件就此结束分发...而每个APP都是由一个个Activity组成的。 还是在说废话… 如下图所示，我们清晰的看到每个Activity都会包含一个Window对象。而window对象通常由PhoneWindow来实现。...场景二 假如在大学中，学校交给了数学老师一个任务，老师讲这项任务布置给了女班长，而女班长又将这个任务交给了帅气的我，我千辛万苦的将这个任务完成了，然后交给了女班长，女班长觉得完成的不错，夸了帅气的我几句...假设我不能按时完成任务，没将任务结果汇报给女班长，也就是HandsomeMyView的onTouchEvent()方法返回true（事件被处理了，不用返回给上级），此时Log输出如下，女班长和老师不用继续处理事件了

    1.3K30

    深入详解iOS适配技术

    从开发的角度，重复繁琐的代码会牵绊住开发者的进度；从程序设计角度，这样的设计思路不够高级，且日后不易于拓展和维护。）...storyBoard上的autoresizing.gif 注意:Autoresizing只能设置父子视图之间的关系，也就是说，Autoresizing只能控制子视图和父视图之间的位置/大小关系。...Autoresizing不能设置兄弟视图之间的关系，当然也不能设置完全不相关的两个视图之间的关系。...正因为Autoresizing只能设置父子视图之间的关系，所以，Autoresizing只能应用于两个视图之间，不能应用于三个或者更多视图之间。毕竟，一个儿子不可能有两个亲爹。...父控件随子控件变化而变化 如果希望父控件随子控件（UILabel/UIView）高度的变化而变化，就不要给父控件添加高度约束，只需要子控和向父控件在垂直方向上添加约束，这样子控件高度改变，父控件高度也会随之改变

    10.4K70

    Android——卡顿优化布局篇（含学习资料分享）

    为何是16ms/为何每秒60帧 android系统每隔16ms绘制一帧UI且要在16ms内完成，（ 1秒 / 0.016帧每秒 = 62.5帧/秒 ）差不多每秒更新60次。...当然了，设备性能越好，处理能力越强，卡顿会越少，玩游戏的电脑配置高也是出于这方面考虑。 那么Android是如何把图像绘制到界面上的呢？ 这就用到了上面的CPU/GPU。...但是我们只能看到最上层的UI，这就会导致多层次的UI界面除最上层外对用户都是不可见的，这样就会浪费大量的CPU以及GPU资源，浪费可耻。...不要急，其实是setVisibility()方法实际上在设置内部视图的可见性，而不是ViewStub本身。...硬件加速原理 [21657ed70922453ca7c5489a9cc6c71c~tplv-k3u1fbpfcp-watermark.image] 相信经常看到有的文章说开启硬件加速解决卡的问题，但硬件加速是什么呢

    1.2K00
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券