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

为什么这些按钮在iPhone上是矩形的,而在我的桌面浏览器上是方形的?

这个问题涉及到前端开发和移动开发领域的知识。

在iPhone上,按钮通常是矩形的,而在桌面浏览器上,按钮通常是方形的。这是因为在移动设备上,特别是iOS系统中,设计师和开发者通常遵循苹果的设计准则和用户体验原则,即"人机工程学"。苹果鼓励使用圆角矩形按钮,这种设计更符合人类视觉感知的自然形状,更易于点击和触摸操作。

矩形按钮在移动设备上具有以下优势:

  1. 视觉美观:圆角矩形按钮更加现代、简洁和美观,与iOS系统的整体设计风格相匹配。
  2. 触摸友好:圆角矩形按钮的边缘更加平滑,触摸时不易产生误触,提供更好的用户体验。
  3. 点击目标大:相比于方形按钮,圆角矩形按钮的点击目标更大,更容易被用户点击到,减少了用户操作的困难。

而在桌面浏览器上,按钮通常是方形的,原因如下:

  1. 界面多样性:桌面浏览器上的界面更加多样化,不同网站和应用可能有不同的设计风格和按钮形状。
  2. 鼠标操作:桌面浏览器使用鼠标进行操作,相比于触摸屏,鼠标点击目标更容易控制,因此方形按钮在点击时不易产生误触。

需要注意的是,这只是一般情况下的设计准则,实际上,设计师和开发者可以根据具体的产品需求和设计风格选择不同的按钮形状。在实际开发中,可以使用CSS样式来定义按钮的形状和外观,以适应不同的设备和平台。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云前端开发相关产品:https://cloud.tencent.com/product/webhosting
  • 腾讯云移动开发相关产品:https://cloud.tencent.com/product/mobile
  • 腾讯云云原生相关产品:https://cloud.tencent.com/product/tke
  • 腾讯云音视频相关产品:https://cloud.tencent.com/product/vod
  • 腾讯云人工智能相关产品:https://cloud.tencent.com/product/ai
  • 腾讯云物联网相关产品:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云存储相关产品:https://cloud.tencent.com/product/cos
  • 腾讯云区块链相关产品:https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙相关产品:https://cloud.tencent.com/product/vr
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么Jetson Orin使用DLA必要

关于DLA基本知识:一篇文章回答你关于NVIDIA DLA所有疑问 NVIDIADLA硬件专门用于深度学习操作固定功能加速器引擎。...NVIDIAJetson Orin SoC最多支持2个第二代DLA(第二代DLA功耗效率方面表现最佳),而Xavier SoC最多支持2个第一代DLA。...为什么Orin使用DLA必要? DLA峰值性能对Orin总深度学习(DL)性能贡献38%至74%之间(取决于电源模式,详见下表)。...DLA平均比GPU功耗效率高3倍至5倍(取决于电源模式和工作负载),下表显示了JetPack 5.1.1下,根据不同电源模式,基于Jetson AGX Orin 64GBDLA相对于GPU性能与功耗比率...注意: Jetson AGX Orin 64GB30W和50W功率模式下DLA TOPs与用于汽车领域DRIVE Orin平台最大时钟频率相当。

54030

eBay这些年轻创业者完美之处

亚当感叹道,也许与他同卵双胞胎一起创办移动零件业务The Perfect ParteBay取得成功驱动因素之一。它让他同时身处两个地方。...eBay上有竞争力销售需要大量关于他们政策知识,The Perfect Part CEO指出。 "喜欢把eBay平台看作一种编程语言。...买家现在可以亚马逊找到一个巨大电信配件市场,但仍然没有内部组件。 "喜欢这样说:当你电视坏了,你可以亚马逊找到一个新电视,但你可以eBay找到修复电视部件,"他提出。...成功关键 The Perfect ParteBay发展很大程度上是因为Zinker兄弟将他们对技术热情和对组织关注结合起来。他们并不局限于eBay销售。..."如果你想在网上全职销售并以此为职业,最好建议亚马逊。然而,并不是说不去eBay.eBay也是必须,但应该在亚马逊获得成功后再引入。"eBay价值350亿美元,而亚马逊价值1万亿美元。

50320

没有DOM操作日子里,怎么熬过来

前言 动笔写这篇文章时候,刚刚从项目中删除了最后一行JQuery代码。至于我为何要这么做,请听闰土娓娓道来。前几年还在想,假如有一天,前端世界里不能再直接操作dom了,该怎么办?...那么接下来,正文从这开始~ 熟悉闰土朋友都知道,从JQ时代过来前端,刚接触react和vue这类MVVM框架时候,完全可以用一脸懵逼来形容,最为贴切。...Vue大法惯用套路:先绘制HTML界面,然后需要绑定数据地方写下v-model、v-on等这些绑定属性和方法,显示数据内容地方使用双大括号显示内容。...jQuery本质只是一个简化了操作函数库而已,代表优化过JavaScript dom操作。...关于后来如何从DOM操作时代毫无压力地过渡到了MVVM时代,我们下一篇再聊。 以上,今天分享所有内容,中篇即将更新。

2.1K120

别人写代码做修改这样保证正确性

就算有,不搞清楚以前逻辑和背景,就直接抛掉这些历史包袱不对修改别人写代码时候,我们需要信奉黑格尔名言:“存在即合理”。一定要弄清楚之前这样编写代码出于什么样考虑。...详细方案设计别人写代码做修改,做详细设计时,第一步要做充分评估改动影响;第二步画流程图梳理改动前后调用链和数据流,列出修改点;第三步定好测试关键案例,确保结果正确性。...制定测试案例 评估影响和逻辑梳理时,关键案例其实已经出来了,这个阶段个整理阶段。同时,也是从另外视角,看看是否能达到“蓦然回首”境界,补齐之前逻辑疏漏。...后来我们就语音沟通了一下这些问题,虽说有些还是不认同,但是也能明白他提问题道理。 有一条,新定了一个错误码,思考这个查询接口非常重要,希望出现问题和其他系统做区别。...逻辑没有问题。但是他觉得代码上层不加,语义不连贯。觉得逻辑应该内聚,自己做好事情不应该让上层来做。这种问题,统归为风格问题。每个人写文章思路不同,写代码思路也是不同

1K20

尝试了数种方法,坚信使用DockerMac构建Linux环境最靠谱

工作环境一直Mac,Mac用于办公和程序开发体验个人觉得是非常酷。...最近一直研究Elasticsearch,Mac搭建了Elasticsearch集群,搭建过程中就发现了各种配置由于环境不一致差别较大。...于是开始了捣鼓之路了~ 一、Macbook安装Elasticsearch Elasticsearch安装和配置支持Mac系统,下载适配Mac安装包即可,但是安装过程中就发现了配置存在不少与...经过一番倒腾和资料查找,以上问题都没很好解决,又尝试了其他一些软件,也多多少少会有这些问题或者其他兼容性问题,于是熄了Mac搭建相关软件心。...列表中填写镜像地址即可,修改完成之后,点击 Apply & Restart 按钮,Docker 就会重启并应用配置镜像地址了。

4.1K30

UI界面视觉平衡终极指南

为了视觉方形保持平衡,三角形应该更宽、更高,这样它们面积才会相似。需要注意,此方法只适用于简单形状。 ? 如何在界面中利用这个特性?...想介绍第一种方法适用于各种网页和APP界面中,即文字高度基于大写字母最高高度。 ? 基本,文字上下距离按钮边缘距离相等。...第一种,矩形对齐方法,这当然没错,因为你切出来svg/png就是矩形,工程师开发时看到也是矩形而在第二个方案中,我们移动了图标的位置,使图标锐利突出与圆形边缘等距。 ?...如果你想让三角形位置视觉更平衡,那么就把它圈起来,然后将这个圆与按钮背景对齐。 ? - 要点: 具有尖锐边缘形状应该更大或更长,以便与相邻矩形保持平衡。...有趣,相比宽度,我们眼睛对物体高度更加敏感。这也解释了为什么即使几何字体中,字母“o”总是比几何圆宽,而字母“H”竖线总是比横线粗。

2.4K40

服务器小白,如何将 node+mongodb 项目部署服务器并进行性能优化

BiaoChenXuYing 前言 本文讲解:做为前端开发人员,对服务器了解还是小白如何一步步将 node+mongodb 项目部署阿里云 centos 7.3 服务器,并进行性能优化...学生优惠套餐 再次购买域名 阿里域名购买,本人也是阿里云购买。...刷新出现 404 问题,可以看下这篇文章 react,vue等部署单页面项目时,访问刷新出现404问题 3.5 上传项目代码,或者用码云、 gihub 来拉取你代码到服务器 创建了码云账号来管理项目代码...,因为码云可以创建免费私有仓库,本地把码上传到 Gitee.com ,再进入服务器用 git 把代码拉取下来就可以了,非常方便。...基于 node + express + mongodb blog-node 项目文档说明 4. 服务器小白,如何将node+mongodb项目部署服务器并进行性能优化

1.5K22

【3.x合批亲测】使用这个优化方案,iPhone6也能飞起来,直接拉满60帧!

而我测试目标,观察对比不同平台环境,使用 98K 优化前后性能表现差异。...除减少 DrawCall 外,还开启了渲染剔除算法以降低渲染面数 优化前后差异对比桌面 > 低端原生 > 低端小游戏 > 中高端原生&小游戏 桌面浏览器优化性能最佳,这是万万没想到,不论...其次 iPhone ,小游戏优化比浏览器要好,未合批前不到 30 帧,开启合批后满帧 60,列表滑动也更顺滑。...最后,发现在 iPhone 和 Android 低配机型未优化时原生性能要低于H5和小游戏,DrawCall 优化后效果立马就出来了。...而从运行环境平台测试效果来看: 桌面浏览效果最佳,如果你做 H5 页游,那再适合不过 再次 iPhone 浏览器与小游戏优化效果显著 然后中低端 Android 也比较推荐 下面 H5 |

1.5K31

移动端必备H5问题及解决方案

产生原因 HTML 本身会产生放大或缩小行为,比如在 PC 浏览器,可以自由控制页面的放大缩小。但是移动端,我们不需要这个行为。所以,我们需要禁止该不确定性行为,来提升用户体验。...很容易想象,需要touchmove滑动时候,优先触发了touchstart点击事件,是不是已经产生了冲突呢? 所以呢,具有滚动情况下,还是建议使用 click 处理。...分为两种场景,一种开发和测试时调试,一种生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境和生产环境不一致,此时就需要紧急生产调试。... PC 端开发时,我们可以直接掉出控制台,使用浏览器提供工具操作devtools或者查看日志。但是 App 内部我们怎么做呢?...- 修改网络 - 高级 - 代理设置 - 手动 IOS :设置 - Wi-Fi - 选中网络, 点击感叹号, HTTP 代理手动 3、手机打开浏览器或者 app 中 H5 页面 4、打开桌面日志网站进行调试

4K42

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

前言 作为一个开发了多个 H5 项目的前端工程师,开发过程中难免会遇到一些兼容性等爬过坑问题。现在这些问题一一汇总一下,并在后面给出坑产生原理,和现阶段常规填坑方案。...产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...显然我们需要控制 touchmove 事件,由此 W3C 文档中找到了这样一段话 Note that the rate at which the user agent sends touchmove...产生原因 HTML 本身会产生放大或缩小行为,比如在 PC 浏览器,可以自由控制页面的放大缩小。但是移动端,我们不需要这个行为。所以,我们需要禁止该不确定性行为,来提升用户体验。...分为两种场景,一种开发和测试时调试,一种生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境和生产环境不一致,此时就需要紧急生产调试。

2K20

【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

前言 作为一个开发了多个 H5 项目的前端工程师,开发过程中难免会遇到一些兼容性等爬过坑问题。现在这些问题一一汇总一下,并在后面给出坑产生原理,和现阶段常规填坑方案。...产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终 safari 文档里面寻找到了答案(文档链接在参考资料项)。 ?...显然我们需要控制 touchmove 事件,由此 W3C 文档中找到了这样一段话 Note that the rate at which the user agent sends touchmove...产生原因 HTML 本身会产生放大或缩小行为,比如在 PC 浏览器,可以自由控制页面的放大缩小。但是移动端,我们不需要这个行为。所以,我们需要禁止该不确定性行为,来提升用户体验。...分为两种场景,一种开发和测试时调试,一种生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境和生产环境不一致,此时就需要紧急生产调试。

1.3K22

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

前言 作为一个开发了多个 H5 项目的前端工程师,开发过程中难免会遇到一些兼容性等爬过坑问题。现在这些问题一一汇总一下,并在后面给出坑产生原理,和现阶段常规填坑方案。...产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终 safari 文档里面寻找到了答案(文档链接在参考资料项)。...显然我们需要控制 touchmove 事件,由此 W3C 文档中找到了这样一段话 Note that the rate at which the user agent sends touchmove...产生原因 HTML 本身会产生放大或缩小行为,比如在 PC 浏览器,可以自由控制页面的放大缩小。但是移动端,我们不需要这个行为。所以,我们需要禁止该不确定性行为,来提升用户体验。...分为两种场景,一种开发和测试时调试,一种生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境和生产环境不一致,此时就需要紧急生产调试。

1.2K30

详解视觉误差对UI设计影响和解决方案

每个人感官可能都不一样,但对于我来说,调整尺寸后两个图形看起来才是一样大,至少也不会像图一一样,让人第一眼就认为正方形比较大。为什么会这样?因为将圆直径增加了 50px。 ?...方形视觉尺寸更接近,也就是我们常说“一样大”。...它们看起来居中对齐,但实际并不是,右边箭头形状按钮文字物理上并未居中对齐,它距离左右两边边距不一样,这种形状按钮文字必须靠左一些才能看起来对齐。 ?...好吧,希望你能够看出来左边那颗按钮有问题,实际画这枚按钮时候确实点了对齐,但是为什么还会出问题呢?跟文字按钮对齐一样,对齐方式选错了。...记住这些点 边缘有角图形要拉长一些才能在视觉方形边缘长度对齐。 制作文字按钮时一定要记得调整行距。 有角 icon 对齐方法保证每个角到边距离相等。

1.2K10

备受乔布斯推崇 PWA,为什么还没有杀死原生应用?

你可以编写令人惊叹 Web 2.0 和 Ajax 应用程序,它们外观和行为与 iPhone 应用程序一模一样,而且这些应用程序可以与 iPhone 服务完美集成。你猜怎么着?...iOS 安装提示 iOS 安装 PWA 需要向用户显示自定义指令 目前 iOS 安装 PWA 需要打开共享面板,然后点击“添加到主屏幕”按钮,这样基本就可以了,但仍然不像安装原生 iOS...幸运,在这方面已经有了一些有趣进展。现在,桌面 Chrome 浏览器支持安装后修改 App 名称。它甚至还提供了一个漂亮反网络钓鱼提示,用户可以选择批准变更或卸载 App。... Android ,打开第三方 App 中链接将打开已安装 PWA。然而, iOS ,它却打开了 Safari 浏览器。...桌面 App Manifest 中 screenshots 属性目前没有任何作用,不过已经有一个提案建议也桌面 Chrome 显示这些截图。

1.4K10

canvas 快速入门

大多数现代浏览器都支持 canvas 元素及其主要特性,但是毫无疑问,IE还不支持这些,至少IE9之前版本是不支持。...创建一个矩形需要输入4个参数。前两个参数方形原点(左上角)(x, y)坐标值,其余两个参数矩形「宽度」和「高度」。...矩形宽度(x, y)位置向右绘制距离,而矩形高度(x, y)位置向下绘制距离。你现在就能明白,为什么理解坐标系统很重要,否则你可能会误认为高度指 从(x, y)位置向上绘制距离。...3.2 圆形 要理解圆形与矩形之间存在很大区别并不难。然而,认识这一点能够说明为什么Canvas中绘制圆形与矩形也有很大区别。...那么,为什么它实际绘制出了一个黑色正方形呢? image-20220608145541626 「宽度/高度技巧」缺点,它会完全重置 Canvas 所有内容,包括「样式」和「颜色」。

1.6K20

12个关于移动 H5 开发采坑问题汇总

作为一个开发了多个 H5 项目的前端工程师,开发过程中难免会遇到一些兼容性等爬过坑问题。现在这些问题一一汇总一下,并在后面给出坑产生原理,和现阶段常规填坑方案。由此来做一个阶段性总结。...产生原因 为什么 iOS webview 中 滑动不流畅,它是如何定义? 最终 safari 文档里面寻找到了答案(文档链接在参考资料项)。...产生原因 HTML 本身会产生放大或缩小行为,比如在 PC 浏览器,可以自由控制页面的放大缩小。但是移动端,我们不需要这个行为。所以,我们需要禁止该不确定性行为,来提升用户体验。...分为两种场景,一种开发和测试时调试,一种生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境和生产环境不一致,此时就需要紧急生产调试。... PC 端开发时,我们可以直接掉出控制台,使用浏览器提供工具操作devtools或者查看日志。但是 App 内部我们怎么做呢?

1.5K20

为什么说c,c++不能跨平台,编译器计算机操作系统吗,难道说编译器不在c,c++程序里吗?

从事软件开发多年对于C/C++用比较多,可以明确说这两种编程语言也是支持跨平台,肯定还是有很多人问什么真正意义跨平台,所谓跨平台就是同一套代码不同操作系统都能直接去运行,这里面涉及到一个很重要问题...,java这门编程语言刚开始流行时候就提到了跨平台功能,windows运行jar包直接放在linux也能直接去运行,单纯从C/C++角度出发也是能够实现这种功能,因为其语法实现是相同。...,具体软件核心架构上代码一致,和平台相关代码还是需要单独去实现,就拿简单线程实现,不同操作系统接口就存在很大差异,所以完全意义跨平台方面距离高级编程语言还是存在差异。...编译器一种工具包集合,内部实现也涉及到C/C++编程,编译器通常说编程代码还是存在一定差异,编译器为代码转化做服务,真正实现跨平台基础部件编译器算是一种,因为不同操作系统或者计算机架构需要具体对应实现...,特别是入门时候显得困难一些,但是入门之后会更加有意思。

2.3K10

AI中文版下载,Illustrator(Ai)各版本软件下载及安装教程ai干货

Illustrator 2021 mac免激活版支持画布100倍放大,可以宽敞画布创建可以轻松缩放大尺寸图形,例如,更方便用于公交车广告和户外广告牌。...0idshjbdff Adobe Illustrator 2022 中矩形工具一种基本绘图工具,用于绘制矩形或正方形。 绘制矩形:选择矩形工具,然后按住鼠标左键并拖动即可绘制一个矩形。...按住 Shift 键可以绘制正方形。 修改矩形尺寸:使用选择工具 (V) 选择矩形,然后拖动边缘或角度处理器即可调整矩形大小。...绘制时,按住鼠标左键并同时按住 Alt 键,然后拖动鼠标即可创建带有圆角矩形。圆角半径可以通过更改圆角矩形属性进行调整。 创建圆形或椭圆:选择矩形工具,然后按住鼠标左键并拖动以绘制一个矩形。...6.安装完成,点击【关闭】 7.桌面会自动生成一个快捷图标,如果没有图标,点击桌面左下角按钮,找到【Adobe Illustrator 2022】直接拖拽到桌面即可生成快捷图标。

2.9K20

单屏页面响应式适配玩法

: 900(或1080) - 180 = 720px 180 = 60 + 20 + 100 60: MAC 桌面程序坞动态尺寸,60 可能常用尺寸吧,那就先这个 20: MAC 桌面最顶部...所以不管在哪种系统下,浏览器宽度与分辨率保持一致(程序坞底部时候,程序坞左右两边一般情况对宽度没有影响),高度则根据系统及浏览器不同各有不同,比方说 Safari 没有书签高度。...看看效果(当然这个最终效果,只改变宽度拉伸适配在最后会说): 8、特殊场景 这里就是刚刚说到 分辨率超大,然后高度居很高,只把宽度缩很小情况,因为设计稿长宽比例为横向矩形,所以明显与用长宽比为竖向矩形来看页面背道而驰...于是乎,现在想法 原来以 vh 为基础情况下,拷贝所有带 vh 单位代码,把 vh 换成 vw,当然这些改动都在一个比如叫 .vw-mode 类下面,基本可以无缝迁移,只需替换 vh 函数名即可...9、移动端 移动端用户没法操作浏览器,所以基本都是标准长宽比,用 vh 最合适不过了,或 vw。

1.9K20

Vue 全家桶 + Electron 开发一个跨三端应用

前言 一.关于我 一名全职 iOS 开发者,非前端开发者。由于接触了 Weex 开发,从而接触到了 Vue.js。 二.为什么会写这个项目?...最开始有这个想法时候来自一个网友,他博客问我,网上有没有写比较好 demo ?说尤大写那个 Hacker News 最好。后来网友就是,楼主能写一个么?当时回答暂时不行。...关于 Vue.js MVVM 实现思想值得 iOSer 们学习。 接下来这个 iPhone Safari 表现,速度还可以。...iPhone 应用 iPad 应用 ?...但是两个平台开发其实还是有很多不同,经历过前端开发和 iOS 开发以后,感想还是很多,前端和 iOS 有很多可以相互学习地方,两者也各有优缺点。接下来打算写写这些方面的系列文章。

2.2K70
领券