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

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

另外一种情况（一般在页面内容很少时 iphone5及以上常发生），当输入框弹出时 fixed元素挤到输入框上，当输入框消失时， fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在...-webkit-backdrop-filter: saturate(180%) blur(20px); background: rgba(0,0,0,0.5); 这个效果暂时只有 IOS9上的 safari...`，具体请看[这里][5] 3.有些版本的 iphone4中， audio和 video默认播放事件不会触发，比如使用 window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放...（这个没用过）  ③ 有的时候比如弹出一个 iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时，想禁止屏幕的滑动...，会提示警示框不要输入qq密码等，这个可以在公众平台的功能设置的业务域名设置 6.微信里假如页面一使用 ajax获取数据，当你进入下一页面再按返回键返回页面一的时候，有些情况不会去请求 ajax数据，会使用缓存

4.2K40

Safari 18.0 WebKit 新特性介绍

该功能适用于 iOS 18、iPadOS 18 和 macOS Sequoia 上的 Safari。 通过点击页面菜单并选择“隐藏干扰项”来激活干扰控制。然后点击你想要隐藏的元素，看它逐渐消失。...当你点击一张图片时，它会单独出现在你面前的一个浮动框架中。空间照片以恰到好处的高度和视角出现，让你感觉仿佛回到了那个时刻。再次点击 UI，空间照片会从框架中脱离出来，变得更加沉浸式。...照片会弹出到一个浮动框架中，同时 Safari 窗口消失。然后当用户点击 visionOS 提供的空间照片或全景图 UI 时，照片会进一步扩展，创造出更沉浸的体验。...在 Safari 中，当图像嵌入网页时，浏览器会显示左通道。而且不需要为 macOS、iOS 或 iPadOS 上的 Safari 提供任何形式的回退——立体 HEIC 文件效果很好。...现在在 visionOS 2 的 Safari 中，当使用 CSS clip-path 改变链接的可点击区域形状时，可见的交互区域也会随之改变。

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

    CSS 下拉菜单与 focus

    hover 算是比较熟悉的了，在 PC 上鼠标悬停于此时 :hover 伪类生效，比如 链接 的样式正是采用 :hover 实现鼠标经过时反馈，以提示用户这是可点击的。...iOS Safari 出错 是的，iOS Safari 上的这个错误是促成本文最主要的缘故。...首先，第一个坑——iOS Sasfari 浏览器中点击 与 button 的时候是不会有 :focus 状态的，倒是原本在 PC 上表示悬停的 :hover 可以在点击（触摸）后被激活。...其次，当一个元素被聚焦时，点击一般的空白处无法使它失焦。这个问题很迷，在 iOS Safari 上 100% 复现而在 iOS Chrome 上完全无法复现。...因此，「Cards」主题在 iOS Safari 上会发生点击下拉菜单可以展开、但是点击空白地方无法收回的问题，除非之后点击的是链接之类的。

    7.6K20

    WEBAPP开发技巧总结

    当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–...因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。 6、自适应布局模式 在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...12、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了...16、iOS中如何获取滚动条的值 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两 个属性是未定义的，为什么呢...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari

    3.3K20

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

    （经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。 ?...点击蒙层，蒙层消失后，下层元素点击触发。 产生原因 为什么会产生 click 延时？...为什么会产生 click 点击穿透？ 双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。...在 PC 端开发时，我们可以直接掉出控制台，使用浏览器提供的工具操作devtools或者查看日志。但是在 App 内部我们怎么做呢？

    2.7K20

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

    （经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。...iOS 上拉边界下拉出现白色空白 表现 手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。...点击蒙层，蒙层消失后，下层元素点击触发。 产生原因 为什么会产生 click 延时？...为什么会产生 click 点击穿透？ 双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。

    2.2K42

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

    （经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...产生原因 为什么 iOS 的 webview 中 滑动不流畅，它是如何定义的？ 最终我在 safari 文档里面寻找到了答案（文档链接在参考资料项）。 ?...iOS 上拉边界下拉出现白色空白 表现 手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。...点击蒙层，蒙层消失后，下层元素点击触发。 产生原因 为什么会产生 click 延时？...为什么会产生 click 点击穿透？ 双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。

    1.9K22

    记录工作中遇到的各种问题（Bug，总结，记录）

    在离开当前页面时判断是否有更改，做出提示 新版本浏览器基于安全机制，不能设置提示的样式，也不能设置提示中操作（确认和取消）的回调，也不能设置提示的文案（旧版的可以设置文案） ? ?...有个编辑器叫 Ueditor，也有一些坑 它会在全局设置ul 和 li 的list-style为none，导致改出现的列表样式消失了 还有一些与奇葩需求结合的坑，忘得差不多了 35....，从timeline瀑布流中发现资源并不是按照页面代码顺序由上往下请求，比如的src资源和css文件中的background-image属性中的src资源加载的顺序，资源并行加载的数量不清晰...导出带链接的数据到Excel表中，点击链接时，不会正确依据浏览器cookie信息访问链接指向的页面（如果该链接有判断是否登陆的情况） 原因：微软相关产品Word／Excel在打开链接时，自个会先去判断这个链接是不是正确的属于自家的...后来发现是点击中间时可以，但点击边缘就没反应 ? 看了源码发现，文件input[file]项是通过点击label模拟触发的 而label的可点击区域实际上是上图中的元素 ? ? ?

    19.7K12

    移动web开发需要注意的二十点

    因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。 6、自适应布局模式 在编写CSS时，不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...在iOS中是不自动识别邮件地址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想Android自动识别页面中的邮件地址...12、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize...16、iOS中如何获取滚动条的值 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari

    2.8K20

    移动开发实用

    不管当前有多少只手指 touchmove 当手指在屏幕上滑动时连续触发。...双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接， 此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...1/2，例如视觉稿40px的字体，使用样式的写法为20px .css{font-size:20px} 参考《高清显示屏原理及设计方案》 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接...,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)} 部分android系统中元素被点击时产生的边框怎么去掉 android用户点击一个链接，会出现一个边框或者半透明灰色遮罩

    8.3K30

    移动端web开发笔记

    ） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） IOS） 在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7位数字，形如：1234567 带括号及加号的数字...双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...的字体，使用样式的写法为20px .css{font-size:20px} 6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置...: rgba(0,0,0,0)} 7、部分android系统中元素被点击时产生的边框怎么去掉 android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-

    4.8K20

    Mac 自带浏览器 Safari 如何开启 Web 网页开发者调试模式？

    Safari 是 macOS 的默认浏览器，虽然在开发者圈子中不如 Chrome 普及，但其内置的开发工具功能强大，尤其在调试 iOS 和 macOS 系统的网页表现时非常有用。...开发者调试模式是一种专为前端开发和调试设计的工具，常见功能包括： 查看网页的 HTML 和 CSS 结构。 调试 JavaScript 代码。 分析网络请求、资源加载时间。...以下是如何打开开发者工具的方法： 通过右键直接打开： 右键点击网页上的任意元素，选择 检查元素。 通过菜单打开： 在菜单栏点击 开发 > 显示 Web 检查器。...开发者调试模式常用功能 Safari 的开发者工具功能与 Chrome DevTools 类似，以下是一些常用功能的快速介绍： 1️⃣ 元素检查（Elements） 用于查看和修改网页的 DOM 和 CSS...+ E 总结与展望 Safari 的开发者工具在调试 iOS 和 macOS 原生网页时是不可替代的工具。

    12.1K30

    挥别web移动端开发差异和经典坑

    web移动端 电话号码识别差异 在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7 位数字，形如：1234567 带括号及加号的数字...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...解决： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题 iOS上拉边界下拉出现空白，安卓无 描述：手指按住屏幕下拉，...（使用输入法输入的过程中） compositionend: 在输入法编辑器的文本复合系统关闭时触发，表示返回正常键盘输入状态(选中文字，输入法消失的那一刻) 判断限制： $('#input')....wx.onSocket断后再次发送链接IOS和安卓差异 描述：小程序 wx.onSocket 链接 在手动断网后，IOS会不停发送请求再链接onSocketOpen，安卓不会 ，解决方法，做一个定时器启动链接

    3.9K20

    看了180分钟的视频，写了半天的代码

    ，故非完整代码)，可以在runjs中去查看 1.用css3画一个气球 看视频的时候觉得自己这个会那个也会，写代码的时候才发现没有智能提示啥都不会，打错单词的次数不是一次两次~ transform：http...4.点击气球，气球消失 发现颜色有点丑~~遂改。...气球消失代码 bindClick(); //绑定点击气球事件 function bindClick(){ document.body.addEventListener('click',function...核心代码终于写完，在我的纯静态工具站点生成二维码扫一扫，在我的小米手机上玩了玩，ok正常，然后再新入手的ipad中试了试。。。擦。坑爹呢，点了咋没反应啊。...好吧，为了ipad能玩，强忍着泪水(饿的)解决了iOS的safari兼容问题~ 5.解决遇到的safari浏览器兼容问题 问题一：Safari中单击事件不能绑定到document.body上~~,因为无效

    81920

    移动端Webapp中的那些Bug

    1.2 解决方案 手动设置滑到边界时的scrollTop（scrollFix） 当快滑到上边界或者下边界的值时，手动设置scrollTop与达到边界时相差一像素(上边界时：scrollTop = 1,...下边界时：scrollTop = elem.scrollHeight - elem.offsetHeight - 1)，这样就不会触发出界的极限条件。...（不过以我的测试情况来看，在chrome和safari上滑动的时候输入框不再被激活，类似在PC端滑动的时候采用了蒙版或者points-event: none;的效果） var thisFocus; var...IOS输入框聚焦后页面整体上移，头部顶出 4.1 出现场景 页面中有fixed头部，输入框，并且输入框靠下时，当输入框focus的时候，会将整个页面上移，导致头部被顶出去。...详情可以看这里，关于anroid上fixed的支持情况，可以看这里 5. Android弹出的键盘遮住输入框 5.1 出现场景 当输入框比较靠下时，android上弹出键盘，会将输入框遮住。

    3.3K50

    📚一站式解决：H5开发全攻略，看这篇让你省时又省力

    当内容滚动到顶部或底部时，滚动事件不会继续传递给父容器。...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...失去焦点时，键盘收起，键盘区域空白，未回落。 原因 键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。 ...是#/home，导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致，致使在 iOS 上分享失败。...⭐️⭐️iOS safari 被点击元素会出现半透明灰色遮罩 解决方案 给 html 或者 body 加入以下 css 代码。

    2.4K21

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

    (1) 设置 html body 的高度为百分比时，margin-bottom 在 safari 里失效 (2) 直接 padding 代替 margin 4.Ios 绑定点击事件不执行？...类似于 history.go(-1); 而 safari（包括桌面版和 ipad 版）的后退按钮则不会刷新页面，也不会提交数据申请。...-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） --> <!...// 以下支持 webkit touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。...> ontouchend > onclick 21.点击元素产生背景或边框怎么去掉 //ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color

    4.2K30

    iOS APP添加桌面快捷方式

    前言 最近在地图项目中测试了一个iOS地图添加到桌面快捷方式的功能，实现的功能是这样的：你可以把经常搜索或导航的历史记录或收藏点如你的家以快捷方式添加到桌面，这样无论在哪儿，你只需要在手机桌面直接点击家的快捷方式图标..."]]; 通过该方法即可调起Safari，让Safari访问附带的URL链接，在该功能实现中，URL链接指向一个Data URI Scheme形式下的HTML页面。...添加到主屏幕，就是将编码好的网页内容和图标保存到桌面。 2.2 点击桌面快捷方式图标唤起APP 当点击桌面图标的时候，会先跳转到一个中间页面，然后执行JS文件跳转到App对应的功能。...至此，iOS APP添加到桌面快捷方式的功能就已经实现了。 3. 技术小科普 最后针对文中出现的几个知识点进行简单科普，以便更好地理解上述逻辑。...当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。

    8K50

    什么是 Preload、Prefetch 和 Preconnect？

    还有很重要的一点，不要过早进行 prefetch，否则会降低你当前浏览的页面的加载速度 —— Google Developers" 除了 Safari， iOS Safari 和 Opera Mini，...DNS Prefetching DNS prefetching 允许浏览器在用户浏览页面时在后台运行 DNS 的解析。如此一来，DNS 的解析在用户点击一个链接时已经完成，所以可以减少延迟。..."DNS 请求在带宽方面流量非常小，可是延迟会很高，尤其是在移动设备上。通过 prefetching 指定的 DNS 可以在特定的场景显著的减小延迟，比如用户点击链接的时候。...除了 Mozilla Firefox，Safari，iOS Safari，Opera Mini 和 Android 浏览器外的一些现代浏览器已经支持了 prerendering。 ?...除了 Internet Explorer，Safari，IOS Safari 和 Opera Mini 的现代浏览器已经支持了 preconnect。 ?

    6.4K31

    移动端的那些坑

    Safari的iframe会自动去适应内容大小而无视CSS中设置的width，该特性只能通过scrolling="no"属性关闭，并通过设置如下CSS样式设置width：width: 1px; min-width...Safari 10以下的flex布局不认width和flex-basis，但是会认min-width，详见Can I Use 中 flex 的 Known issue第一条。...属性时，有一定概率出现transform的元素以外的所有  元素都消失，上下滑动一下页面又出现了。...当使用-webkit-overflow-scrolling: touch;时，同时使用::-webkit-scrollbar伪类的display:none隐藏滚动条在iOS 11+出现失效的情况，需要使用如下方案解决...，在iOS下，需要禁止页面中的touchmove事件，在安卓下，需要给html, body元素加上如下CSS：height:100%;overflow:hidden;。

    2.2K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券