文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

最新iOS设计规范四｜3大界面要素：视图(Views)

模板图像应集中在约70px×70px的区域中。 使用简单的活动标题来描述你的任务。标题显示在活动视图中的图标下方。短标题最好。当标题太长时，iOS首先缩小文本，然后如果标题仍然太长直接将其截断。...仅当用户点击取消按钮时才取消当前的任务。 在屏幕适当的位置显示浮层。浮层的箭头应尽可能直接指向触发它的元素。因为浮层不能在屏幕上拖动，所以浮层不能覆盖屏幕上太多内容。也不能覆盖触发它的元素。...采用动态类型文本是个好办法，这样如果用户在设备上更改文字大小，你的文本内容仍然会有友好的体验。还应该在启用了辅助功能选项（例如粗体文本）的情况下测试内容单显示情况。 显示恰当的键盘类型。...iOS提供了几种不同的键盘类型，每种键盘都对应着一种具体的输入方式。为了用户可以流畅地进行数据输入，在编辑文本视图期间显示的键盘，应该适合于该字段中的内容类型。例如，输入支付密码弹出的是数字键盘。...十二、网页视图（Web Views） 网页视图可以在APP中加载和显示丰富的网页内容。例如：嵌入式HTML和网站；邮箱APP使用网页视图来在消息中显示HTML内容。 ? 适当地使用前进和后退导航。

8.5K31

移动端那些戳中你痛点的软键盘问题及解决方法

这个参考了朱雷大佬提供的这个文章：WebView上软键盘的兼容方案[1] IOS 软键盘弹起表现 在 IOS 上，输入框（input、textarea 或 富文本）获取焦点，键盘弹起，页面（webview...IOS 软键盘收起表现 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。 Android 软键盘收起表现 触发输入框以外的区域时，输入框失去焦点，软键盘收起。...但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。 ? ? 2、为什么fixed会失效 既然ios键盘弹起时，页面会上移，那么为什么fixed会失效呢。...同样参考这篇文章：WebView上软键盘的兼容方案[3] 综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现，我们可以分开进行如下处理来监听软键盘的弹起和收起： Ios 在 IOS 上，...2、吸底元素（也就是按钮）能够在键盘弹出之后，出现在键盘的上方 对于这个问题，因为安卓表现是webview缩小，所以在安卓上并不存在这个问题，对于ios，因为ios向上滚动的距离最大是键盘的高度，但是也有可能滚动距离不是键盘高度

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

    【H5】209-可能这些是你想要的H5软键盘兼容方案

    问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 webview 表现不同。...IOS 软键盘收起表现 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。 Android 软键盘收起表现 触发输入框以外的区域时，输入框失去焦点，软键盘收起。...但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。 ? ?...听软键盘弹起和收起 综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现，我们可以分开进行如下处理来监听软键盘的弹起和收起： 在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提，其次是将焦点元素滚动到可视区，同时要考虑到第三方输入法和某些浏览器上的差别。

    4K12

    可能这些是你想要的H5软键盘兼容方案

    从实验过一些机型上看，发现主要存在以下问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 webview 表现不同。...IOS 软键盘收起表现 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。 Android 软键盘收起表现 触发输入框以外的区域时，输入框失去焦点，软键盘收起。...但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。 ?...监听软键盘弹起和收起 综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现，我们可以分开进行如下处理来监听软键盘的弹起和收起： 在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提，其次是将焦点元素滚动到可视区，同时要考虑到第三方输入法和某些浏览器上的差别。

    8.1K20

    按钮样式的正确方式

    在整个Web上，我们可以看到很多触发JavaScript操作的按钮，仔细检查后发现它们是用，或编码的。 为什么元素如此不受待见？...知识点：许多开发人员不知道它（学习100+HTML元素需要一点时间）。 样式上：附带复杂的默认样式，这可能很难实现自定义外观。 幸运的是，样式部分可以北修复！...悬停(hover)，焦点(focus)和活动(active)样式 很酷，你的按钮看起来不错，但是...用户将与它进行交互，并且当按钮的状态改变时，他们需要视觉反馈。...您的网站或网络应用程序的用户可以使用键盘或虚拟键盘（在iOS和Android上）“”并激活表单域，按钮，链接和其他交互元素。 对于一些用户来说，它可以加速缓慢的交互，比如填写表单。...他们依靠使用键盘或专用设备访问网站。 在我见过的大多数Web项目中，设计师都指定了预期的鼠标移过样式，但未指定焦点样式。 我们应该做什么？

    3.7K20

    iOS 9人机界面指南(四)：UI元素（下）- 腾讯ISUX

    举个例子，在新建邮件的界面中，用户可以点击该按钮来在邮件中添加收件人，而不需要用键盘输入收件人的名字。...由于添加联系人按钮属于键盘输入联系人方法的替代品，我们不推荐在不支持键盘输入的界面中使用添加联系人按钮。...API注释 想要了解如何在代码中定义信息按钮，可以参考UIButton. iOS包含了两种信息按钮样式：适用于浅色内容上的深色按钮，以及适用于深色内容上的浅色按钮。...4.3.11 刷新控件 刷新控件执行用户触发的内容刷新——一个典型的例子，它常在表格中出现（下图展示的是iOS默认的邮件app的mailbox列表页）。 ?...根据输入内容的类型来指定不同的键盘类型。举例来说，你希望用户能更方便地输入网址、密码或者电话号码。iOS提供了各种不同的键盘类型，以便用户输入不同类型的文本。

    13.2K30

    热门应用滥用苹果 iPhone 推送通知，暗中窃取用户数据

    许多 iOS 应用程序正在使用由推送通知触发的后台进程来收集设备的用户数据，从而有可能创建用于跟踪的指纹档案。...唤醒并收集数据 为防止资源消耗和提高安全性，苹果公司在最初设计 iOS 时就允许应用程序在后台运行。在用户不使用应用程序时，它们就会被暂停并最终终止，因此无法监控或干扰前台活动。...不过，在 iOS 10 中，苹果引入了一个新系统，允许应用程序在后台悄悄启动，以便在设备显示新推送通知之前处理它们。...Mysk 在 Twitter 上表示：通过这次测试，可以看到这种做法比预想的更为普遍。许多应用程序在被通知触发后发送设备信息的频率令人震惊。...这些 API 可用于检索设备信息，如磁盘空间、系统启动时间、文件时间戳、活动键盘和用户默认设置。

    15610

    微信小程序官方组件展示之表单组件textarea源码

    否focus时，点击页面的时候不收起键盘2.8.2disable-default-paddingbooleanFALSE否是否去掉 iOS 下的默认内边距2.10.0confirm-typestringreturn...右下角按钮为“换行”confirm-holdbooleanFALSE否点击键盘右下角按钮时是否保持键盘不收起2.16.0bindfocuseventhandle否输入框聚焦时触发，event.detail...= { value, height }，height 为键盘高度，在基础库 1.9.90 起支持1.0.0bindblureventhandle否输入框失去焦点时触发，event.detail =...2.tip: 不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。...3.tip : 键盘高度发生变化，keyboardheightchange事件可能会多次触发，开发者对于相同的 height 值应该忽略掉4.bug: 微信版本 6.3.30，textarea 在列表渲染时

    1.1K20

    最新iOS设计规范五｜3大界面要素：控件（Controls）

    栏（Bars） 栏，可以告诉用户在APP中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...网络加载指示（Network Activity Indicators） 网络加载指示在iOS 13和全面屏显示的设备上已被弃用。...在iOS 12及更早版本中，以及在全面屏显示的设备上，网络活动指示器会在发生联网时在屏幕顶部的状态栏中旋转，联网完成后消失。和活动加载指示器样式一样，并且是非交互式的。 ?...使用图像和按钮在文本字段中提供清晰度和功能。可以在文本输入框的左侧或右侧显示自定义图标，也可以添加系统提供的按钮，例如“书签”按钮。 键盘 根据实际情况，显示适当的键盘类型。...iOS提供了几种不同的键盘类型，每种键盘都用于方便不同文本类型的输入。当用户在输入文本时，根据输入的文本类型显示相应的键盘类型，可以简化数据输入。

    8.6K30

    h5页面在不同iOS设备上的问题总结

    在做文章评论的功能时，会遇到很多兼容性的问题，在不同机型上的表现也很不一致，总结了以下这些问题。 1. 日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别。...键盘收起，页面卡住，不回落 ios12上，发现键盘收起的时候，页面会卡主，留下底部一片空白，稍微动一下页面，就会恢复。...发布按钮，输入完文字，点击“发布”，触发click事件的时候，会导致页面先触发blur事件，键盘回落，然后一切就结束了。。。。...3. ios12在微信小程序的webview，键盘收回，页面底部会留白 这个问题怀疑是页面的scroll设置了auto导致的。 解决方案：滚动一下页面，请参考链接，代码有效。...键盘遮挡输入框 输入框如果使用了fixed固定在底部，键盘顶起的时候，iphone上fixed会失效，导致页面滚动输入框会随着页面滚动，并且在部分机型上，输入框偶尔会被键盘遮挡，这种偶现的问题，很不友好

    1.9K20

    移动端Webapp中的那些Bug

    IOS通过脚本使输入框聚焦，无法弹出键盘 2.1 出现场景 看如下代码： // html <input type="email" class="form-control" id="inputEmail3...2.2 解决方案 爬墙爬到这么一个issue，3楼eddiemonge老哥说到了，在IOS下除非用户手动触发了输入框的focus事件，才会触发键盘，至于设置定时器也是不管用的；但是，手动点击一个按钮，在按钮的操作中再来执行...我有一个登录页面，在聚焦之后需要往上弹一下，android上正常，然后IOS上还同时引出了一个BUG：输入框上去了，但是光标却在下面闪。怎么办呢？...下面放一个link，然后在overlay上绑定touchstart事件，在link上绑定click事件。...如果可视区域的高度大于后者，说明此时的输入框需要上移，那么就将body向上平移，否则不平移。在键盘消失的时候回归到原来的位置就好。

    3K50

    手机端页面在项目中遇到的一些问题及解决办法

    作者：键盘上的眼泪 https://segmentfault.com/a/1190000015178877 1.解决页面使用 overflow: scroll 在 iOS 上滑动卡顿的问题?...(1) 设置 html body 的高度为百分比时，margin-bottom 在 safari 里失效 (2) 直接 padding 代替 margin 4.Ios 绑定点击事件不执行？...在安卓上面，点击页面底部的输入框，软键盘弹出，页面移动上移。 而 ios 上面，点击页面底部输入框，软键盘弹出，输入框看不到了。。。...(1)type="tel" iOS 和 Android 的键盘表现都差不多 (2)type="number" 优点是 Android 下实现的一个真正的数字键盘 缺点一：iOS 下不是九宫格键盘，输入不方便...不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。

    3.5K30

    移动端app开发问题及理解

    onkeydown 键盘按键按下 contextmenu 弹出右键菜单 h5新加事件 ondrag 元素被拖动时运行的脚本 ondragend 在拖动操作末端运行的脚本 ondragenter...singleTap 手指碰一下屏幕触发 doubleTap 手指双击屏幕触发 swip滑动类事件 swipe 手指在屏幕上滑动触发 swipeLeft 手指在屏幕上左滑触发 swipeRight...手指在屏幕上右滑触发 swipeUp 手指在屏幕上上滑触发 swipeDown 手指在屏幕上下滑触发 vant组件使用过程中遇到的问题 弹框dialog组件确认回调函数 最开始我绑定的是confirm...，点击按钮打开模态框触发，点击确定触发，点击取消触发。...iPhone的UIWebView（iOS2.0-12.0 ），WKWebView（iOS8.0+，macOS10.10+），Android的WebView WebView可以理解为手机应用中运行和展示网页的界面和接口

    3.8K10

    移动端H5页面开发坑点指南

    中;这与往返缓存(bfcache)有关系,解决方法: window.onunload = function(){}; 定位的坑 在IOS下fixed定位在软键盘顶起时会失效，所以我们在开发时统一使用absolute...及Android上无法使用,在PC端正常 2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间 问题4:Safari浏览器自动播放...IOS中对input键盘事件keyup/keydown/keypress等支持不好的问题 经查发现,IOS的输入法(不管是第三方还是自带)能检测到英文或数字的keyup,但检测不到中文的keyup,在输入中文后需要点回退键才开始搜索...关于iOS与OS X端字体的优化(横竖屏会出现字体加粗不一致等)问题 iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS上的问题,但桌面版Safari的字体缩放功能会失效...键盘收起，但没有触发 window resize，导致实际页面dom仍然被键盘顶上去--错位 document.addEventListener('focusout', () => {

    3.1K10

    UIViewController生命周期

    合创建一些附加的view和控件 3、ViewWillAppear 在视图加载完成，并即将显示在屏幕上时，会调用viewWillAppear方法，在这个方法里，可以改变当前屏幕方向或状态栏的风格等。...比如键盘弹出，一些特殊的过程动画（比如状态条和navigationbar颜色）。...都会被调用，而第二次(viewA已经有了viewB)只调用viewB的 view的Frame变化会触发layoutSubviews 滚动一个UIScrollView会触发layoutSubviews 旋转...Screen会触发父UIView上的layoutSubviews 改变transform属性时，当然frame也会变 处于key window的UIView才会调用(程序同一时间只有一个window为keyWindow...applicationWillResignActive：在应用程序将要由活动状态切换到非活动状态时候，要执行的委托调用，如 按下 home 按钮，返回主屏幕，或全屏之间切换应用程序等。

    2K10

    h5软键盘挡住输入框问题解决（android）

    在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起（ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域...在我这里无效。 经测试发现android弹出键盘时有两种效果： 1.将activity挤压，键盘也占一部分activity空间； 2.键盘弹出在浏览器上面覆盖一层，不影响浏览器大小。...; 2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。...fixed，有些手机键盘弹出时会把按钮顶上来，如果上述代码中fixHeight设置不合适，会导致这个按钮遮挡输入框。...所以为了统一效果，将底部按钮取消fixed，随页面滚动。 第二，如果点击键盘上的收起键盘按钮，会导致页面top无法恢复，因为没有触发输入框失焦方法，需点击空白处恢复。

    6.5K10

    H5直播避坑指南

    video.play(),这就是各种微信的h5活动页面需要引导用户进行一下点击操作才开始的原因。...，在iOS10以后，需要加上playsinline,建议同时加上这两个属性，同时需要app支持这种模式，手Q和微信都支持这种模式 //在html <video id="player" webkit-playsinline...视频的默认播放图标 在iOS下会有一个默认的播放图标，如图所示 ?...而一般用户进入页面基本都是竖屏，所以我们就要考虑怎么让用户在竖屏点击全屏按钮时，能体验到像终端app一样自动进入横屏全屏的体验，下面有两种方案 1.在用户点击全屏时候，通过css3属性旋转屏幕 通过css...在拉起键盘输入弹幕的时候，键盘不受控制还是竖屏显示了 如果页面不涉及与原生组件的交互，那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时，通过js api来控制webview旋转横屏

    10.9K151

    收藏 | 移动端H5开发常用技巧总结

    「解决方案」 在滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置 overflow 设置外部 overflow...web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。...加入自动触发播放的代码 $('html').one('touchstart', function() { audio.play() }) iOS 上拉边界下拉出现空白 手指按住屏幕下拉，屏幕顶部会多出一块白色区域...手指按住屏幕上拉，底部多出一块白色区域。 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。...中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应

    4.2K20

    一个BUG的发现、定位和解决

    的取消按钮点击区域变小等，本文介绍其中一个UIAlertView问题，分享其发现、定位和解决。...正文 1、问题产生 问题的最初，是iOS 11正式版发布后不久，测试的同学提了一个iOS 11相关的BUG，表现是：在直播间内发送聊天信息，如果被禁言，会弹出“被禁言”提示，键盘收回去，然后就弹不出来。...2、问题复现 按照复现路径做一次尝试，发现BUG可以复现，确定问题存在； 根据经验，猜测问题可能出现在键盘和UIAlertView上，与“禁言”的业务无关。...在尝试完其他非直播间的主场景之后，发现问题可以描述为： iOS 11的机器只要弹出来一次UIAlertView，之后再通过becomeFirstResponder无法呼起键盘；必须手动点击输入区域，触发系统的键盘弹出行为...在iOS 11，如果UIAlertView弹出时，存在windowLevel 大于 UIWindowLevelNormal 的UIWindow，就会触发这个键盘无法弹出的BUG。

    1.5K70

    DOM事件

    ， 12 4月 2021 作者 847954981@qq.com 前端学习, 我的编程之路 DOM事件 要做一个动态的网页，那就必须要网页拥有动态的活动，因此对于网页上的DOM对象，我们需要获取其中的事件来做出相应的活动...Textarea, etc..）获取焦点事件 blur: 表单组件（Input, Textarea, etc..）失去焦点事件 鼠标事件 click: 点击事件 dblclick: 双击事件 mousedown: 在元素上按下任意鼠标按钮...mousemove: 指针在元素内移动时持续触发。 mouseover: 指针移到有事件监听的元素或者它的子元素内。 mouseout: 指针移出元素，或者移到它的子元素上。...mouseup: 在元素上释放任意鼠标按键。...操作中更改样式属性的方法，来实现动态化 事件冒泡 在JavaScript有一种情况，当你同时在父亲节点和子节点同时设置监听事件，当你触发了子节点的监听事件，父节点的事件也会被触发，这种现象叫做事件冒泡。

    76830
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券