开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Chrome在iPhone的页面周围添加了一个凹槽的填充

，这是因为在iPhone X及其后续机型中，苹果采用了刘海屏设计，即屏幕顶部中央有一段宽度较窄的区域，其中包含了前置摄像头和其他传感器。为了适应刘海屏的设计，Chrome在iPhone上调整了页面布局，使得页面内容不会被刘海部分遮挡，以提供更好的用户体验。

在这个过程中，Chrome会在页面顶部添加一个凹槽的填充，以填补刘海部分的空白区域，使得页面内容能够完整展示。这样用户在浏览网页时就不会感到刘海的影响，可以更好地利用屏幕空间。

Chrome为此提供了一种响应式布局的方式，可以根据设备的屏幕大小和形状来动态调整页面布局，以适应不同的屏幕设计。这种适应性设计有助于开发人员为不同的设备提供一致且良好的用户体验。

在腾讯云的产品中，与移动开发相关的产品包括：

腾讯云移动推送（Mobile Push）：提供高效的消息推送服务，支持iOS和Android平台，可以帮助开发者快速实现消息推送功能。详细介绍请参考：https://cloud.tencent.com/product/umeng_push
腾讯云直播（Cloud Live）：提供高可用的直播服务，支持实时推流、低延迟播放等功能，适用于各种直播场景。详细介绍请参考：https://cloud.tencent.com/product/live
腾讯云短信（SMS）：提供可靠的短信验证码和通知服务，支持国内外短信发送，可以满足不同场景下的短信需求。详细介绍请参考：https://cloud.tencent.com/product/sms

以上是针对移动开发的一些腾讯云产品，开发者可以根据具体需求选择适合的产品来实现移动应用的功能。同时，腾讯云还提供了一系列其他云计算服务，例如云服务器、云存储、人工智能服务等，可以满足不同领域的开发需求。

相关搜索:SwiftUI .contextMenu使用clipShape在我的视图周围添加了可见的填充在一个页面中的多个Jssor在chrome中失败 Google chrome在使用iframe时增加了一个额外的滚动条。在iphone上重新格式化一个简单的html页面 Visual studio代码Chrome调试扩展插件打开一个新的Chrome页面，而不是在VSC GUI中进行调试回到在Chrome中工作而不是Safari中的前一个页面，有什么想法吗？我正在设计一个chrome扩展，它将搜索页面上的文本并将其超链接。我在超链接文本时遇到问题在我的Todo ReactApp中，我使用了flux。使用useEffect时，我添加了一个侦听器，但是当Todostore更新时，页面不会重新呈现。为什么不行？微软自己的编程语言微信公众号编程语言

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

H5Canvas入门（上）（下）

浏览器打开我们保存的文件，并开启chrome浏览器开发者工具。...solid为边框的线型类型，关于线型，大家可以参考下表，一个个尝试，并配合宽度、颜色调整。值描述 none 定义无边框。 hidden 与 "none" 相同。...groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。...、css、sass、less等）并自动刷新页面。...您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”

1.7K5 0

iPhone14机模测评来袭！最大更新竟是感叹号屏幕，网友：就这？

在Sam Kohl的视频里，你会发现iPhone 14和iPhone14 Max是和去年的iPhone 13，以及iPhone 13 Pro Max最像的两种型号了。...之前已经有过相关的爆料提到过，今年苹果将会放弃之前的凹槽设计，而采用新的「药丸」+打孔屏的设计。然而这项设计上的变化在14 Pro的机模上是看不出来的。因为机模是假屏幕。...而这一点在14 Pro上没有改变，扬声器还是在相同的位置。但因为今年的凹槽没有了，所以从外观上来看会有一些不同。药丸+打孔屏的设计会让扬声器和凹槽不再在一起。...这其实是件好事，因为凹槽变高了，而宽度却变窄了。在Kohl的视频中还有一点很有意思。我们能发现，14 Pro和14 Pro Max后置摄像头变得比原来更凸出来了。...ispectechular就表示，「我很喜欢顶部这种感叹号的设计。我觉得这绝对是一项重要的更新。其实我可能更喜欢一个孔的。但已经比凹槽的设计好多了。」

4302 0

是时候在项目中使用这个CSS属性了

八月份做移动端项目的时候，同事让我帮忙看个底部安全距离的问题，我立即摩拳擦掌，原因无他，仅仅是因为当天上午我在medium闲逛时，正好看到了这篇文章：You have to start using this...比如凹槽周围的区域，以及像iPhone（x及以上）这样的设备上的 Home Bar 周围的区域。问题说明你有没有试过将一个元素定位到屏幕底部？您很快遇到的问题是可见视口与交互式视口不同。...幸运的是，移动浏览器将这些安全区域存储在环境变量中，供我们使用！您的内容应该与安全区域一起工作，而不是放在它后面不可接触。...;) 祝你有一个愉快的一天。我遇到的问题以上就是原文啦，接着开始的问题说，因为说了是安全距离的问题嘛，页面在移动端的浏览器中，底部的导航栏和ios的小黑线重叠在一起了。...一个小小的问题，我的心里却历经了曲折，以至于时隔一个多月，依旧印象深刻。如果有帮助的话，分享和点赞吖~

6323 0

苹果iPhone 14摄像头拆解分析

苹果在基准型号 iPhone 14 上推出了升级的主后置摄像头，在 iPhone 14 Pro/Max 上推出了改进的前置摄像头模块，当然还有期待已久的后置摄像头分辨率升级，最终出现在 iPhone 14...从下图拆解可以看到，苹果 iPhone 14 和 14 Plus 的前置摄像头模块似乎与 iPhone 13 相同，至少从凹槽布局来看，凹槽的位置和形状基本相同。...图 1. iPhone 13、iPhone 14 前置摄像头与基准型号相比，苹果对高端 iPhone 14 Pro/Max 的前置摄像头模块进行了重新设计，据苹果公司称，该凹槽现在被称为“动态岛”。...查看来自 Apple iPhone 14 Pro/Max 的高对比度图像，前置摄像头模块有两个区域，一个用于 TrueDepth，另一个用于 IR 摄像头/发射器组件，如图 2 所示。...对于四像素，报告的像素间距为 2.44 µm。换言之，该传感器的绝对像素间距在 48MP 分辨率下为 1.22 µm，在 12MP 分辨率下为 2.44 µm。

1.3K1 0

Shadow DOM 的一次挖掘 —— 揭秘 range input 的内部结构

二、range input 的构成部分的在各个浏览器的表现差异接着我们看下 range input 的构成部分的在各个浏览器的表现差异： input range box-sizing 在 Chrome...但是在 Chrome 中没有提供伪元素来匹配此元素。...slider: 由于在 Chrome 没有提供填充区域的伪元素，那么怎么自定义填充区域的颜色呢？...在计算填充区域范围时，需要考虑上文提到的 Chrome 已填充区域范围的表现，具体实现如下 @mixin track { background: linear-gradient(100deg,...step dot 的水平中心点始终和已填充区域的右边界对齐，上一个案例中已经说明了如何计算这个边界值。

1.6K1 0

搭载A16芯片，iPhone14Pro把刘海改成交互窗口！库克：这是最具创新性的专业产品

因为iPhone 14和14 Plus都保留了13的大部分设计，比如自拍摄像头和和Face ID传感器凹槽、相同的平面显示屏和导轨。以至于一眼看过去，你甚至不知道这是14还是13。...在相机方面，一个超广角和一个新的1200万像素主相机，f/1.5光圈和基于传感器的稳定功能。苹果公司称，低光照图像质量提高了49%，夜间模式的速度是现在的2倍。...在尺寸大小上，iPhone 14 Pro仍然将提供通常的6.1英寸和6.7英寸的选择，但刘海的部分将会被一个药丸状的切口所取代，该切口将容纳Face ID组件和第二个用于前置摄像头的圆形切口。...iPhone 14 Pro的接近感应器也被移到了屏幕后面，通知将以动画形式从凹槽中弹出，苹果称之Dynamic Island。...在首次亮相后的7年时间里，Apple Watch已经成为了苹果配件的一个重要组成部分。智能手表？不，腕上电脑的时代正在拉开序幕。

6833 0

适配iPhone X 的齐刘海

问题：当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在...我们的数据显示有 5%-10%的 iPhone X 用户使用横屏，或许是因为屏幕大，或许是因为关于 sensor housing 高涨的讨论导致想看看会出现什么情况，但我很高兴他们能看到一个适应良好的网站...两个要素：有2个基础的要素来调节 iPhone X 的 sensor housing: 1. 一个新的 viewport meta content 值 2....这时一些内容就会被遮挡在 sensor housing 凹槽下面。我们必须设置一些智能的 padding 值，以使内容可见。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。

9829 0

前端成神之路-移动web开发_流式布局

近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。...1.3常见移动端屏幕尺寸 1.4移动端调试方法 Chrome DevTools（谷歌浏览器）的模拟手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问...视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...通过判断设备，如果是移动设备打开，则跳到移动端页面。也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端： ? 京东移动端： ?...通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

1.6K2 1

支持5G的 iPhone 12系列泄密！窄刘海，6.7英寸巨无霸，9月8号发布

设计上看，传言称2020年推出的新款 iPhone 将会重新设计一个金属框架，类似此前 iPhone 4或者 iPad Pro 的框架。...根据macrumors网站报道，在两片玻璃之间有一个方边儿不锈钢框架，不是曲边儿的设计，类似目前的iPad Pro，并将继续使用前后玻璃作为设备的机身。苹果的设计一直在不断的创新。...郭认为苹果将会使用蓝宝石或者钢化玻璃来保护框架上的凹槽。 ? 流出的渲染图显示 iPhone 12 Pro Max 的厚度为7.4毫米，比8.1毫米厚的 iPhone 11 Pro Max 要薄一些。...iPad Pro 中的激光雷达扫描仪使用反射光来测量从传感器到周围物体5米远的距离。它可以在室内和室外工作，基本上能够以纳秒的速度在光子水平上映射你周围的环境。啥时候做屏下指纹？...该芯片是高通公司的第一个5G 芯片，支持所有主要频段，运行模式和网络部署。

4331 0

移动web开发_流式布局

近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。...1.3常见移动端屏幕尺寸 1.4移动端调试方法 Chrome DevTools（谷歌浏览器）的模拟手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP...视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端：京东移动端： 2.响应式页面兼容移动端（其次）响应式网站：即pc和移动端共用一套网站...通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

1.3K1 0

适配iPhone X 的齐刘海

问题：当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在...我们的数据显示有 5%-10%的 iPhone X 用户使用横屏，或许是因为屏幕大，或许是因为关于 sensor housing 高涨的讨论导致想看看会出现什么情况，但我很高兴他们能看到一个适应良好的网站...两个要素：有2个基础的要素来调节 iPhone X 的 sensor housing: 1. 一个新的 viewport meta content 值 2....这时一些内容就会被遮挡在 sensor housing 凹槽下面。我们必须设置一些智能的 padding 值，以使内容可见。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。

5242 0

iWatch开发：实现iWatch 与 iPhone 之间数据发送与接收

上一代的iwatch 与iPhone 数据交互使用的是 openParentApplication 函数，在Watch OS2 中摒弃了这种方法，引入了WCSesison 来进行iwatch 与iPhone...代理：在 willActivate 中加入如下代码：这是建立一个WCSession的基本方法。...使用WCSession中的sendMessage发送数据，代码如下：这边定义了一个 NSDictionary 的字典作为数据对象，来发送给iPhone。...由于在头文件中添加了WCSessionDelegate 的代理，所以必须要实现其中的API 函数，其中的didReceiveMessage 就是用于接收iPhone发来的数据：这样，我们就完成了WatchKit...iOS端处理接收与发送同样，在我们的iPhone 端也需要导入 WatchConnectivity/WatchConnectivity.h, 以及添WCSessionDelegate。

1.1K1 0

H5底部添加导航栏遮挡主体内容（移动端底部导航栏实现）

之前从别的站扒的发现在部分浏览器无法显示底部导航栏增加了如上属性后显示导航栏但是又遮挡了主体内容，今天翻遍了CSDN终于找到了解决办法。 <!...: 页面最后生成时间 expires : 设置 cache 过期时间 cache-control : 设置文档的缓存机制 ... -->...-- apple-touch-icon：在webapp下，指定放置主屏幕上 icon 文件路径 --> <!

2.6K4 0

移动开发-流式布局

移动开发-百分比布局流失布局案例: 京东商城: 点击查看通过盒子宽度设置百分比来根据屏幕宽度来进行伸缩，不受固定像素限制，内容向两侧填充流式布局，就是百分比布局，也称非固定像素布局 max-width...视觉视口 visual viewport: 它是用户正在看到的网站的区域，可通过缩放去操作视觉视口理想视口 ideal viewport: 理想视口，对设备来讲，是最理想的视口尺寸，需要手动添写meta...视口标签通知浏览器操作 meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致，就是设备有多宽，布局视口就多宽二倍图: 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素...=1物理像素多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题通常使用二倍图，因为iPhone6\7\8影响，还存在3倍4倍图的情况，这个看实际开发需求 background-size...webkit-box-sizing: border-box; /*点击高亮我们需要清除设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在

1K3 0

css面试点一：盒模型详解+遗漏点

什么是css盒子模型可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content...盒模型是有两种标准的，一个是标准模型，一个是IE模型 W3C盒子模型（标准盒模型） IE盒模型（怪异盒模型）标准盒模型与IE盒模型区别标准模型中，盒模型的宽高只是内容（content）的宽高，...IE模型：在IE6/5的低版本IE中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高， css如何设置两种模型：（css3的属性 box-sizing）通常情况下...根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。但 IE5 和 6 在怪异模式中使用自己的非标准模型。...这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明<!

4474 0

移动端H5的一些基本知识点总结

移动端的页面在我这个做习惯了PC端页面的人看来,应该是很简单的一些事情.但是在上手的过程当中,还是发现,原来移动端虽然DOM结构要简单得多,但是需要注意的细节,还是非常多的.原因非常简单,那就是,你必须考虑所有的手机上不同分辨率的展示效果...知道了这个之后,我们就开始了复杂的计算,比如,我要设定一个12px 的文字,需要用什么百分比.会发现,这个计算真心是坑爹啊,我在一个项目的一期就是这样做的.但是这个计算真心累....在PC端chrome浏览器中,默认最小文字是 12px 当你设置为这样之后利用开发者工具进行调试的时候,会发现有一些诡异的地方.因此,需要将浏览器的最小文字设置为10或者6,一般都设置到6,这样可以解决在...在做移动端页面的时候,尽量不要设定宽度,让它自然的占据一行,这时候我们可以根据需要设定外填充和内填充....在设定了这样的宽度之后,不要给这个元素设定内填充和外填充.如果有需要的话,在这个元素里面再写一个元素,给这个元素加你所需要的填充.

4651 0

BeautifulSoup的基本功能介绍

在日常爬虫工作中会遇到很多数据对比的测试任务，在后端接口有做数据加密，或接口有做鉴权等情况下，我们再从后端去取参数，耗费的时间成本就会增加。...关于BeautifulSoup爬的使用这里我们可以简单的介绍下，BeautifulSoup是python的一个库，最主要的功能是从网页抓取数据，在抓取的过程中会使用到一些功能。...():获取第i个a标签里面的内容】爬取数据案例如下，这里以访问豆瓣为需求，因为豆瓣的反爬机制都是比较严的，并且需要登录，这里只是实践不做大量数据抓取，所以只在代码里面添加了代理IP。...proxies=proxies, headers=headers) print resp.status_code print resp.text BeautifulSoup虽然作为一个爬虫工具还是有很多的用处的...，这里只是对功能做个简单介绍和认识，希望能对大家有帮助，有更优的实现方式可以自己再添代码实现。

3761 0

移动端 webapp meta小结

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。...对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320。...: 允许用户缩放到的最大比例 user-scalable: 用户是否可以手动缩放对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone 会根据你设置的属性自动推算其他属性值..." /> X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。...=1"> #以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.

1.3K3 0

安卓Chrome使用技巧合辑

文章更新: 　　20160921 初次成文　　20170424 大幅修正:删除了失效的实验室特性，并增加了Chrome Canary专用特性　　20170514 增加了"姊妹篇(GIF...在无网络连接情况下打开任何一个网页，将弹出一个"小恐龙"界面，点击小恐龙即可开始玩儿Chrome自带的游戏(700分后有惊喜)。　　7....受网络环境的限制，你可能需要把一个页面保存下来以便离线时查看，这时你只需要打开Chrome的菜单，点击菜单上部的"下载"按钮，即可将此网页保存到本地。...阅读器模式: 　　chrome://flags/#reader-mode-heuristics 　　启用此模式后，在用户指定的网页类型下(带有文章结构化标记/显示为文章/总是启用)，在页面下方将显示一个...，将在屏幕底部显示一个快速填充底栏，点击底栏中的快速填充项可以快速将此项填充到输入框。

9.5K3 0

网站页面滚动加载动画JS特效

终于尘埃落定了，前段时间忙的不可开交，结婚，工作，因为婚假+年假一起休的，导致很长时间没有更新博客了，今天抽空给大家带来了一个js特效，网站模块延迟加载的动画，假期之前就想着制作这个功能，页面滚动加载...简介和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。...浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果，并且因为不支持一些属性或方法会报错...为了达到更好的兼容，最好加一个浏览器及版本判断。...（可选）可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：

11.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭