李杉 编译整理 量子位 出品 今天凌晨，谷歌在纽约发布了旗舰手机Pixel 3和Pixel 3 XL。 ? 先不说手机，这次Pixel 3上最令人难以置信的新功能之一是“通话过滤”。...屏幕边框更小，OLED显示屏采用柔性设计，所以边缘带有弧度。 ? 较小的Pixel 3在顶部和底部仍然有黑色边框（尽管尺寸有所减小）。...不是粉其实就是很多人所说的粉色。但它不是一个鲜艳的粉红色，更像是一种带有粉红底色的裸色，看起来几乎与iPhone 8的金色相同。...带有无线充电功能的iPhone（iPhone 8及更高版本）也可以在Pixel Stand上充电。...例如，如果宠物或小孩没有静坐，你可以在取景框中点击拍摄对象，相机会在移动时调整焦距，这样你就不太容易拍到模糊的照片。 谷歌一直在宣传Pixel相机的暗光拍照能力。
很多时候，我们希望有一种方法可以避免某种CSS问题或行为的发生。我们知道，网页内容是动态的，网页上的东西可以改变，从而增加了出现CSS问题或奇怪行为的可能性。...防止图像被拉伸或压缩 在无法控制图片高宽比的情况下，如果用户上传的图片与高宽比不符，最好提前考虑并提供解决方案。 在下面的例子中，我们有一个带有照片的卡片组件。它看起来不错。...根据浏览器的高度进行测试可以发现一些有趣的问题。 这里有一个我见过多次的例子。我们有一个带有主要和次要链接组件。次要链接应该位于旁白部分的最底部。 考虑一下下面的例子。主导航和次导航看起来还不错。...如果有一定数量的子项目，布局看起来会很好。然而，当它们增加或减少时，布局会看起来很奇怪。 考虑以下例子: 我们有一个有四个项目的 flex 容器。...布局移动发生的原因是为滚动条保留了一个空间。 Scrollbar Gutter 是内边框边缘和外填充边缘之间的空间。 对于经典滚动条，Scrollbar Gutter 的大小与滚动条的宽度相同。
开篇 你是否遇到过一个问题，即在移动设备上有一个固定元素，当键盘激活时，该元素会被键盘遮挡？这已经是多年来网络上的默认行为了。...浏览器将向上滚动以使输入框在键盘上方，因此粘性标题和浮动按钮将消失。 它看起来与以下内容相似： 这是移动浏览器中的默认行为。...input { font-size: 16px; } .cta { bottom: env(keyboard-inset-height, 0); } 在移动设备上， bottom 的值将等于键盘的高度...由于 env(keyboard-inset-height) 在桌面上的值为 zero ，所以最大值为 2rem 。 在移动设备上，最大值是第二个。...底部的值将是 1rem 或键盘的高度。 在桌面尺寸上，宽度等于变量 --size ，而在移动设备上，它将占据整个宽度，因此使用了 env(keyboard-inset-width, 0) 。
web移动端 电话号码识别差异 在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7 位数字，形如：1234567 带括号及加号的数字...{ overflow-y: hidden; } .wrapper { overflow-y: auto; } MDN定义： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果...移动端click屏幕产生200-300 ms的延迟,PC端无 问题描述：移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。...手指按住屏幕上拉，底部多出一块白色区域。安卓无此特性。 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。...，防抖与节流均不生效； 时间：201907 微信公众号 安卓在微信授权回调带#的URL跳转会出现空白 描述：安卓手机，在微信授权回调的函数中进行跳转至的URL不能带有#,但#号可放置在结尾。
在高清屏下，移动端的 1px 会很粗。 那么为什么会产生这个问题呢？...在 iOS 上，输入框默认有内部阴影,以这样关闭： div { -webkit-appearance: none; } 如何禁止保存或拷贝图像 代码如下 img { -webkit-touch-callout...body { overflow-y: hidden; } .wrapper { overflow-y: auto; } js 篇 移动端click屏幕产生200-300 ms的延迟响应 移动设备上的...手指按住屏幕上拉，底部多出一块白色区域。 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。...，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件 IOS12 输入框难以点击获取焦点，弹不出软键盘 定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。...在iOS 13及更高版本中，可以通过删除导航栏的阴影来隐藏导航栏的底部边框（当滑动内容区域时，边框会自动重新出现）。无边框样式在大标题导航栏中效果很好，因为它增强了标题和内容之间的联系感。...但是，无边框样式在标准标题导航栏中可能无法很好地起作用，因为该栏的标题和按钮可能难以区分。iPad上的拆分视图是一个例外，更多的是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间的一致性。...四、状态栏（Status Bars） 状态栏出现在屏幕的上边缘，并显示有关设备当前状态的有用信息，例如时间，移动电话和电池电量。状态栏中显示的实际信息取决于设备和系统配置。 使用系统提供的状态栏。...例如，如果iOS设备上没有歌曲，则“音乐”应用中的“立即收听”选项卡将说明如何下载歌曲。 始终在附加视图中切换上下文。
绘制画板 或者您可以查看右侧的“检查器”列。如您所见，有几种不同设备尺寸的预设尺寸。我选择了iPhone 5。 ?...选择画板 注意：如果您需要调整画板的大小，只需选择其名称并拖动显示在角落上的白色框。 Sketch使产品设计变得非常简单。 如果你想看整个画布怎么办？让我们尝试使用位于屏幕顶部的工具进行缩小。 ?...适合画布到屏幕 添加形状 现在您的画板完全可见，让我们添加一个矩形。位于“插入”>“形状”>“矩形”中。 ? 矩形工具 我在画板的顶部做了一个细条，就像移动应用程序中的导航栏一样。 ?...这里有一个“边框”部分，带有一个复选框。取消选中它以删除默认边框。 ? 删除边框 我们还可以更改边框上方部分的填充。我使用＃104F8A。您可以在吸管图标下方的框中输入此数字。 ?...改变填充 请注意，如果单击填充窗口底部的+号，则可以保存此颜色样本以供日后使用！ 准备好了吗？转到第2部分
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。...太长的文本可能会使您的界面拥挤，并可能在较小的屏幕上被截断。 只在必要时添加边框或背景颜色。默认情况下，系统按钮没有边框或背景。但是，在某些内容区域中，边框或背景是表示交互性所必需的。...页面控件显示在屏幕底部的中心。页面控件应始终位于内容底部和屏幕底部之间的区域，并保持居中。这样即能让页面控件是可见，又不会遮挡其他内容。...在正在编辑的字段的下方或附近显示选择器效果很好。选择器通常显示在屏幕底部或弹出窗口中。 日期选择器 日期选择器是用于使用触摸屏，键盘或定点设备选择特定日期，时间或两者的有效界面。...十二、滑杆（Sliders） 滑块是带有一个称为“拇指”控件的水平轨道，你可以用手指滑动该控件以在最小值和最大值之间移动，例如屏幕亮度的调节或媒体文件播放期间的位置调节。
尤其对尺寸固定的移动界面有帮助，但对响应式web设计也有帮助。 与一般的设计指南相比，此文更适合一边设计一边阅读。 代码>原型 设计软件和原型工具让你创造界面看起来最好的样子。...现在，几乎你在设计工具上做的所有东西都可以用代码创造出来，但是总有些因素让设计方案很难实施（可能是可用性、加载时间、展示效果等）。 不论如何，最重要的是你的设计能通过代码在用户的设备商运行。...Box模型 Box模型是一种描述物体尺寸和空间的形式，其包含四种信息：边框、外边距、内边距和元素本身的尺寸。 边框 元素边边缘轮廓线的粗细。大部分的设计工具不允许其影响整体的空间和尺寸。...这个概念一般被成为像素拟合，它确保所有元素在用户设备上显示清晰明确。 文本在这方面是个例外，为了能够清晰阅读需要一些反锯齿效果来让形状有一定模糊度。所以不要担心文字的每个点都对其到栅格上。...使用基线确定文字底部是提高纵向统一性的好方法。通过排布每行文本的基线，可以很容易地让所有的界面元素处于和谐的纵向节奏中。 我喜欢将我的8pt界面栅格和4pt基线栅格合并使用。
HTML方向 调用系统功能 使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。...可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。...* { -webkit-tap-highlight-color: transparent; } 复制代码 禁止动画闪屏 在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...该解决方案在视觉上无任何变化，完爆其他解决方案，其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。...在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。
等高元素对齐 等高元素对齐也是很常见的，比如下图这种两个等高的按钮： ? 这种设计有个小问题，就是右侧的浅色边框与左侧的色块放在一起的时候，视觉上就会感觉右侧的高度少一点。...所以，在有多个列表元素并带有边框时，大家就要注意一下第一个元素（有的时候是左侧边框或者上边框）和最后一个元素了。 垂直居中的对齐 其实前面说的很多都是垂直居中对齐，可见页面仔实现垂直居中有多么难了。...对于最常见的按钮，中间带文字的，也是很容易对不齐的。 比如这个： ? 在视觉效果上已经比较居中了，我们看看放大效果： ? 从技术上来说，这个已经算是垂直居中了。...但是这张图上，除了“煮”字的底部多了 1px，其他都是对齐的。所以视觉效果上的底线应该是在第二条线的位置，也就是上面 9px 下面 10px，所以会感觉有一点点偏。...你大概就能估计出蓝灰文字中间的间距也就是 5~6px 了，所以你只需要记住几个常见的字号在各种设备上的长相，那么你就有了一系列的比例尺了。
仅使用CSS，您就可以通过边框创建一个三角形。 这是一个相当老的技巧。理想情况下，你会在一个宽度和高度都为零的元素上设置边框。所有的边框颜色都是透明的，除了那个将形成箭头的边框。...例如，要创建一个向上指的箭头，底部边框是有颜色的，而左边和右边是透明的。无需包括顶部边框。边框的宽度决定了箭头的大小。...然而，另一种不太受欢迎的在x轴上居中元素的方法是使用 text-align CSS属性。这个属性在居中文本时就能直接使用。要想在DOM中也居中其他元素，子元素需要有一个 inline 的显示。...因此，你会发现将 border-radius 设置为非常高的值是很方便的，这样无论按钮是否增大，你的css都能继续工作。...这是一个完整的集合，你只需要挑选出那个能点燃你心中火花的。只需看看这个库的简单用法，源代码在Github上可用。
HTML方向 调用系统功能 使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。...可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。...* { -webkit-tap-highlight-color: transparent; } 禁止动画闪屏 在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...该解决方案在视觉上无任何变化，完爆其他解决方案，其实就是一种反向思维和障眼法。该解决方案完美解决固定弹窗和滚动弹窗对全局滚动的影响，当然也可用于局部滚动容器里，因此很值得推广。...在苹果系统上的输入框输入文本，keyup/keydown/keypress事件可能会无效。
这样做的好处是，无论在什么设备上查看，我们的CSS圣诞老人都能保持良好的显示效果。 利用渐变背景创建辅助网格 为了更方便地定位元素，我们可以添加一个重复的线性渐变来创建背景网格。...绘制圣诞老人的身体部分 在绘制圣诞老人的身体部分时，我们将使用一个类似钟形的形状，它在CSS中基本上是一个椭圆形，底部角半径较小。关于CSS中的形状，可以阅读我在这里发表的文章获得更多信息。...在一些圣诞老人的插画中，许多都将圣诞老人外套的底部画成白色。因此，我们可以扩展身体上的径向渐变，让它结束于白色而不是透明。...通过添加从透明到半透明黑色的小垂直渐变，手臂在视觉上与身体产生距离。这种渐变效果看起来像是阴影，并强调了手臂的后置位置。 手部同样简单，就是一个圆形。与眼睛或按钮的绘制方法相同。...然后我们将其放置在画布的底部，并添加一点微小的弯曲度（通过制作一个倒置的钟形！）。就这样，我们的圣诞老人站在了一个小山丘上。 雪花的步骤也相当简单。
一、前言 在之前做的视频监控系统中，根据不同的用户需要，做了好多种视频监控内核，有ffmpeg内核的，有vlc内核的，有mpv内核的，还有海康sdk内核的，为了做成通用的功能，不同内核很方便的切换，比如...支持图片地图，设备按钮可以在图片地图上自由拖动自动保存位置信息。 在百度地图和图片地图上，双击视频可以预览摄像头实时视频。 堆栈窗体，每个窗体都是个单独的qwidget，方便编写自己的代码。...录像机管理、摄像机管理，可添加删除修改导入导出打印信息，立即应用新的设备信息生成树状列表，不需重启。 在pro文件中可以自由开启是否加载地图。...支持onvif搜素设备，支持任意onvif摄像机，包括但不限于海康大华宇视天地伟业华为等。 支持onvif云台控制，可上下左右移动云台摄像机，包括复位和焦距调整等。...默认采用opengl绘制视频，超低的CPU资源占用，支持yuyv和nv12两种格式绘制，很牛逼。 高度可定制化，用户可以很方便的在此基础上衍生自己的功能，支持linux和mac系统。
例如，我们使用宽度和高度，并在元素的右上角，底部和左侧设置边距。在水平和从上到下的布局方式，这些物理属性看起来很奇怪。...这让您很方便在网页上实现与移动应用程序类那样整页滑动效果（滑块效果），可以在页面之间进行捕捉。 Scroll snapping——方便您实现类似APP那样的整页滑动的效果。...在父元素上，我们添加了属性scroll-snap-type，滚动的轴方向的值，然后是一个必需或接近的关键数值设置捕捉点，因此在使用它时应该小心您不会因为滚动捕捉而导致用户无法滚动到某些内容。...在项目上，我们使用属性scroll-snap-align指定要捕捉到的位置（指定元素哪一部分应该与容器对齐）。它有三个值可选择：start、center和end。这些是相对于滚动方向的。...@media(40em < width < 59em ){ /*CSS rules for screen sizes between 40em and 59em */ } 复制代码 这个语法起初看起来很奇怪
在 iPhone4使用的视网膜屏幕中，把 2x2个像素当 1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。 ?...实际上，从苹果提出视网膜屏幕开始，才出现设备像素比这个概念，因为在这之前，移动设备都是直接使用物理像素来进行展示。...当然，仅仅是类似，由于各个设备的尺寸、分辨率上的差异，设备独立像素也不会完全相等，所以各种 Android设备仍然不能做到在展示上完全相等。...如上图，我们在描述设备独立像素时曾使用过这张图，在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素。...而在设备像素比大于 1的屏幕上，我们写的 1px实际上是被多个物理像素渲染，这就会出现 1px在有些屏幕上看起来很粗的现象。
webkit-tap-highlight-color: transparent; } ⭐️⭐️禁止动画闪屏 通过使用perspective、backface-visibility和transform-style属性，可以解决在移动设备上动画闪屏的问题...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作....element { pointer-events: none; } ⭐️⭐️⭐️⭐️⭐️1px 问题 现象 在 H5 页面中，可能需要设置边框宽度为 1px，但在 Retina 屏幕上，1px...原因 这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。 解决方案 利用伪元素和 scale 来实现 0.5px 的效果。...设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
