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

移动端的那些坑

Safari的iframe会自动去适应内容大小而无视CSS中设置的width，该特性只能通过scrolling="no"属性关闭，并通过设置如下CSS样式设置width：width: 1px; min-width...建议结合ua-parser-js使用，因为iOS 10+的其他浏览器（QQ、UC）等都还是尊敬这个东西的。...当使用-webkit-overflow-scrolling: touch;时，同时使用::-webkit-scrollbar伪类的display:none隐藏滚动条在iOS 11+出现失效的情况，需要使用如下方案解决...css.sm-no-scroll {     height: 100%;     overflow: hidden; } 但由于禁掉了touchmove事件，导致iOS下你希望滚动的部分也无法滚动了，因此对于希望滚动的部分...，通过e.stopPropagation保留原有滚动效果，并针对回弹动画的交互，建议使用如下代码声明一个可滚动区域： /* 以下属性添加到滚动容器上 */ -webkit-overflow-scrolling

2.2K30

移动端web开发笔记

5、 移动端手机号码识别（IOS） 在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7位数字，形如：1234567 带括号及加号的数字...不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。...双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...如果不希望开启此功能，我们可以通过input标签属性来关闭掉： 14、 禁止文本缩放 当移动设备横竖屏切换时，文本的大小会重新计算...body元素的滚动条，所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动； Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果

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

    第三方库兼容坑：某 UI 组件在移动端的适配问题及修复

    第三方库兼容坑：某 UI 组件在移动端的适配问题及修复 文章概览 一次第三方 UI 组件在移动端表现异常的兼容性复盘 从现象、排查、根因到应急与正式修复的完整路径 提供通用的 CSS 与 JS 适配策略...，可直接复用 背景 项目引入第三方 UI 库的弹层组件用于筛选与确认交互 桌面端表现正常，移动端在 iOS Safari、Android Chrome 上出现体验问题 组件内部封装滚动与定位逻辑，外层为单页应用...影响固定定位在 iOS 的表现 查看是否启用 -webkit-overflow-scrolling: touch 与滚动锁定的组合 通过 visualViewport 与实际截图对比组件高度计算是否随键盘变化...触发新叠加上下文，固定定位在 iOS 行为异常 滚动锁定实现不一致，背景滚动与弹层滚动冲突导致回弹 未考虑安全区，底部操作区被遮挡 文本采用 line-height: 1 使触控区过窄与基线不匹配，出现垂直错位...弹层打开时对 body 应用 overflow: hidden 或使用稳定的滚动锁定库 弹层内部开启 -webkit-overflow-scrolling: touch 提升滚动体验 验证要点 地址栏显隐与键盘弹出时

    23410

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

    当内容滚动到顶部或底部时，滚动事件不会继续传递给父容器。...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...是#/home，导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致，致使在 iOS 上分享失败。...⭐️⭐️iOS safari 被点击元素会出现半透明灰色遮罩 解决方案 给 html 或者 body 加入以下 css 代码。...在需要锁定滚动的情况下，给 document 添加 touchstart 和 touchmove 事件的监听器，通过捕获触摸滑动事件，并根据情况阻止默认行为，从而避免滚动穿透。

    2.7K21

    移动端浏览器和微信浏览器上禁止body的滚动条

    但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用，然后我分析了我的写法，就是在body上加了一个class去定义属性，然后改成标签的定位，如body{overflow:hidden;}，这个实现是可以的...; position: fixed; } 这个就是完全的禁止上下滑动，没有滚动条，且在iOS的safari浏览器上完全不能上下滚，但是确发现微信浏览器上可以上下缩动（下面再解决）。...我最后发现，上面这种解决是普遍的浏览器做法，如果要更彻底一点，就直接使用js代码去控制touchmove的事件，直接精致，这个在微信和手机浏览器上完成可行。...参考：http://www.cnblogs.com/lbcheng/p/6044303.html 经过上面的设置，如果用户在微信浏览器上不能滚动，但是跳出到了iOS的safari浏览器之后，会有很多变数...2、当跳出到手机浏览器上完全可以滑动。上面的思路实现：1、通过微信useragent来判断，如果是微信浏览器自动加入class去设置。2、非微信useragent就默认不加class。

    3.4K10

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

    至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的...12、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize...16、iOS中如何获取滚动条的值 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？...20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari

    2.9K20

    【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配

    维基百科①的解释为： 在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...同理，当浏览器窗口比较小，而我们想要看到页面下面的内容时，我们需要向下滚动滚动条，浏览器在实现这个的过程中所依赖的，便是视口的下移。...不过，该方案依然会有很多问题： ●对缩小版页面内细节内容的浏览，依然要依靠放大和滚动，体验不好； ●如果 为 PC 设计的 网页的 CSS 宽度描述大于 980px，那么在移动端展示时，初始页面依然会有滚动条...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...两倍屏的 1px*1px 对应的是 2*2=4 个物理点； ●浏览器厂商，根据宿主设备的屏幕物理像素密度，设定了一个 dpr，以便相同数量的逻辑像素描述的 UI 界面，在物理世界不同的屏幕上看起来的大小都能差不多

    4.3K30

    彻底搞懂移动Web开发中的viewport与跨屏适配

    维基百科①的解释为： 在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...同理，当浏览器窗口比较小，而我们想要看到页面下面的内容时，我们需要向下滚动滚动条，浏览器在实现这个的过程中所依赖的，便是视口的下移。...不过，该方案依然会有很多问题： ●对缩小版页面内细节内容的浏览，依然要依靠放大和滚动，体验不好； ●如果 为 PC 设计的 网页的 CSS 宽度描述大于 980px，那么在移动端展示时，初始页面依然会有滚动条...不做大的代码调整的话，等比缩放类的移动端网页，在 PC 上的合理展现方式应该是页面总宽度锁定在某个值，然后水平方向居中。（如下图） ?...两倍屏的 1px*1px 对应的是 2*2=4 个物理点； ●浏览器厂商，根据宿主设备的屏幕物理像素密度，设定了一个 dpr，以便相同数量的逻辑像素描述的 UI 界面，在物理世界不同的屏幕上看起来的大小都能差不多

    4.8K20

    移动端 H5 兼容问题合集：iOS 与 Android 的差异化处理

    移动端 H5 兼容问题合集：iOS 与 Android 的差异化处理 目标：系统梳理移动端 H5 的常见兼容问题，针对 iOS Safari/WKWebView 与 Android Chrome/WebView...Safari 的 100vh包含浏览器工具栏，导致视图溢出；使用 dvh/svh/lvh 与降级： .full-height { min-height: 100dvh; } @supports not...滚动穿透：overscroll-behavior 控制，必要时锁定背景滚动 自动播放失败：muted + playsinline + 用户手势 下载不工作：Blob 方案替代 a[download]...Safari、WKWebView、Android Chrome、Android WebView 通过 键盘弹出与收起不遮挡关键元素，底部栏按可视高度调整 滚动不穿透，弹层与抽屉关闭后恢复滚动 媒体播放在...iOS 内联与静音策略下可用 文件下载与预览路径可用，失败时给出清晰提示 表单输入在中文 IME 过程中无重复触发与丢事件 样式在高 DPR 下无细线失真与排版抖动 分享、复制、跳转与登录态在内置浏览器稳定

    58010

    移动Web 开发中的一些前端知识收集汇总

    添加初始化图片 用户点击你桌面上的webapp的图标后，打开会加载浏览器（实际上是webkit webview模块），然后下载、解析、渲染，在这个过程中，ios允许我们使用一个初始化图片来替代白色的浏览器屏幕...关闭iOS中键盘自动大写、自动更正、自动完成 在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了...:none;outline:none;} iOS 浏览器横屏时会重置字体大小的问题 iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决ios上的问题，但桌面版...闪屏问题 使用css3动画的时尽量利用3D加速，从而使得动画变得流畅（可参考《移动Web 开发中的 Off Canvas 导航》这篇文章）。..., 可用在图片上加这个属性禁止下载图片*/ -webkit-overflow-scrolling: touch;/*快速滚动和回弹，模拟原生app效果*/ click 事件 ios的safari的click

    4.6K50

    Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

    状态; 出现所需的数据; webview1 当 App 首次打开时，默认是并不初始化浏览器内核的；只有当创建 WebView 实例的时候，才会创建 WebView 的基础框架。...2.2 在客户端上配置： 在调试项目中要进行测试的 HTML 界面中引入 debuggap.js。...js" type="text/javascript"> 当调试项目的加载时，您的应用程序将会有一个蓝色的地方，点击会出现一个四叶三叶草的东西...参考文章：《iOS之Safari调试webView/H5页面》 一般我们通过 Mac 的 Safari浏览器 来调试，但是要注意两点： 如果调试的是 APP 中 WebView 的页面，则需要这个...如果调试的是 H5 页面，可以直接在手机的 Safari浏览器 打开直接调试。 下面开始说说在 Mac 上如何调试： 1.

    4.3K00

    中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

    提及的安卓系统包括Android和基于Android开发的系统 提及的苹果系统包括iOS和iPadOS 本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...弹窗打开后内部内容无法滚动 弹窗关闭后页面滚动位置丢失 Webview能上下滑动露出底色 当打开弹窗时给声明position:fixed;left:0;width:100%并动态声明top。...这种情况在Safari上特别明显，简单概括就是往返页面无法刷新。 「往返缓存」指浏览器为了在页面间执行前进后退操作时能拥有更流畅体验的一种策略，以下简称BFCache。...当中提及了CSS方向的很多坑位，这些坑位也属于一些CSS开发技巧，若喜欢CSS的同学可了解笔者上架的掘金社区首本CSS小册《玩转CSS的艺术之美》做更深一步学习。

    5.1K22

    Hippy 常用调试方法和常见问题案例

    iOS，要注意不能使用到太新的 JS 特性。...其实非常简单，Hippy 在 iOS 中时通过自带的 JavaScriptCore 运行的，所以可以通过自带的 Safar 进行调试，在 Safari 的设置 -> 高级打开开发者菜单后 ，启动 Hippy...[Safari 调试菜单位置] 然后就可以用 Safari 开始调试了，唯一要注意的时，断点需要在启动后才生效，启动时是断不下来的，启动问题可以在关键点加上日志，日志能够正常输出。...当滚动出现异常的时候，可以通过 XCode 调试一下终端代码，它有个 Debug View Hierarchy 功能，可以非常直观地看到界面层级和尺寸，对调试样式问题有很大帮助。...，当节点数量与 numberOfRows 一致时再上屏。

    5.1K100

    WEBAPP开发技巧总结

    当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–...至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位 时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的...12、如何关闭iOS中键盘自动大写 我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了...16、iOS中如何获取滚动条的值 桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两 个属性是未定义的，为什么呢...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？

    3.4K20

    移动端开发中遇到的坑点及总结(持续更新)

    有新的坑点会总结进来） 一、new Date（）在IOS上出现值为NAN的问题 我们常用new Date()去获取时间戳，例如 new Date("2017-08-11 12:00:00"); 但在IOS...原因：这是IOS采用Safari浏览器内核的原因，会在数字串加上a标签，并且在a标签里添加属性值tel 解决办法：在head里面添加如下mate标签就可以了。...#root(jq写法) // 弹窗show时： $('#root').css('overflow','hidden') // 弹窗hide时： $('#root').css('overflow','...auto') 这个方法可以解决，但不适用于部分情况，当我们往下滑动再触发显示弹窗时，我们关闭弹窗后会发现，页面突然跳到了最顶部，这是不太友好的地方。...元素上，加上这样的css属性 cursor: pointer **解决办法二：**将document换成绑定元素的父元素 $(selector的父元素).on('click','selector',function

    1.4K30

    CSS 布局技巧 | 移动端 H5 滚动条深度解析，从触发逻辑到多端兼容

    在前端开发中，滚动条处理是一个常见但又复杂的问题。伴随着手机系统的多样化，不同手机系统的滚动行为上的差异成为开发者需要跨越的技术鸿沟。...当内容的高度超过容器的高度时，浏览器会自动显示滚动条。滚动条可以分为两种类型：body滚动：整个页面的滚动，适用于内容高度超过视口高度的情况。...overflow: auto按需显示滚动条：仅在内容溢出时显示滚动条，否则隐藏。智能适配：避免无效滚动条干扰界面，提升空间利用率。...三、多端兼容性问题与解决方案3.1 iOS Safari 滚动惯性缺失问题现象：页面滚动生硬，松手即停。...'EMUI'标识 * - 当检测到EMUI系统时，修改文档根元素的CSS自定义属性 */// 检测华为EMUI系统if (navigator.userAgent.includes('EMUI')) {

    79820
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券