前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iPhone XR XS 底部固定定位偏移解决方案

iPhone XR XS 底部固定定位偏移解决方案

作者头像
吴裕超
发布于 2019-07-02 09:47:34
发布于 2019-07-02 09:47:34
9730
举报
文章被收录于专栏:吴裕超吴裕超

最近在做一个活动页时,发现当上滑页面时,底部固定定位的按钮也跟着移动了一点,当下滑时,又会回到原来位置。

如上图,底部紫色按钮要求是右侧样式,结果上滑时如左图上移了。

解决办法:

html的head的meta viewport 中加

viewport-fit=cover

<meta name="viewport"

content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0,viewport-fit=cover">

加上之后,就正常了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-06-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
h5页面适配iPhone X的方法
项目接近尾声,测试时突然想起还有iphoneX需要适配,虽然页面都是自适应,但是由于iPhone X的特殊性,还是需要特殊对待。因为这个h5项目嵌入在原生项目中,适配就会有有种方式:1.在原生中用原生的的方法适配 2.在前端页面中用h5的方式适配。
honey缘木鱼
2018/12/28
1.8K0
修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG
今日,开发了一个 h5 项目,其中有部分页面使用了底部按钮,采用的是相对于浏览器窗口定位的样式制作的。
FungLeo
2019/05/27
1.4K0
移动端必备的H5问题及解决方案
上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。
前端小tips
2021/12/11
4.9K0
移动端必备的H5问题及解决方案
原 适配iPhoneX
作者:汪娇娇 时间:2017年12月26日 我这里说的适配iPhoneX,是一种比较简单粗暴的适配法,就是填满整个屏幕(包括安全区域和上下左右这些边,见下图)。 1、meta标签 <meta name
jojo
2018/05/03
6390
原                                                                                适配iPhoneX
【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!
image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下面就让我来逐一介绍吧! 客户端适配 解决方案 客户端直接将webview的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色webview内: image.png 利弊分析 优点:H5前端开发没有任何适配工作量。 缺点:页面会限制在客户端限制的webview区域内,没有满屏效果。 使用media query 解决方案 针对iPhoneX机型
QUXINGDONG.COM
2018/04/17
3.3K2
【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!
极速适配 iPhone X 秘笈
iPhone X 适配方案 2017年9月苹果发布了 iPhone X 机型,对于它的“刘海儿”和底部 Home Indicator,QQ空间 H5 也在第一时间做了兼容适配。在适配过程中,我们尝试了这三种方案,如下。 解决方案1 客户端适配 客户端直接将 webview 的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色 webview 内: 利弊分析 优点:H5 前端开发没有任何适配工作量。 缺点:页面会限制在客户端限制的 webview 区域内,没有满屏效果。 解决方案2 使用 media
腾讯ISUX
2018/06/29
1.4K0
CSS适配iOS全面屏底部横条
所有开发者应对资源页面做好不同手机型号的适配效果,不影响用户的正常浏览使用。其中IOS全面屏手机底部横线不可遮挡页面的具体功能和内容。
AlexTao
2021/03/29
3.7K0
CSS适配iOS全面屏底部横条
适配iPhone X 的齐刘海
当苹果宣布发布他们的旗舰手机-- iPhone X 的时候,他们允诺将为未来移动设备设定新的标准。我们决定需要了解一些内容。 “屏幕再也不必是方形的” 除了无边框设计,就是我们熟悉的“齐刘海”,官方叫:Sensor Housing。它迅速成为一个热门话题,提出了一种全新的设计挑战:屏幕再也不必是方形的。虽然这对原生应用是一个更大的考验,但web开发也需要一些考虑。不管它是吓到你或者激发了你, sensor housing 都已存在。现在是为你的客户提供一种非常整洁体验的绝
前端黑板报
2018/01/29
1K0
适配iPhone X 的齐刘海
可爱的rem
嗯,这种的样式的工作量超级大,因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过~~~
Jimmy_is_jimmy
2019/07/31
9420
css单边投影与双侧投影
练小习
2017/12/29
1.1K0
面试官:来实现一个js上下信息循环滚动
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120055573
马克社区
2022/07/13
1.1K0
移动端iPhone系列适配问题的一些坑
完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过
王小婷
2018/06/01
1.1K0
【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 )
例如:<meta name="viewport" content="width=device-width, initial-scale=1.0"> , 该标签的作用是告诉浏览器,
韩曙亮
2023/04/24
4.1K0
【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 )
UNI-APP 开发微信公众号(H5)JSSDK 的使用方式
uni-app 中为兼容微信小程序生态存在全局的 wx 对象,而微信 JS-SDK 也是注册全局的 wx 对象,为避免混淆,可以将微信 JS-SDK 中的 wx 对象改名。采用以下两种方案之一即可。
高久峰
2023/12/17
5200
39·灵魂前端工程师养成-MVC
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/11/08
7600
39·灵魂前端工程师养成-MVC
iPhone X 适配手Q H5 页面通用解决方案
本文总结
林焕彬
2017/11/10
13.2K1
iPhone X 适配手Q H5 页面通用解决方案
移动端流式布局
width=device-width         //设置页面宽度等于设备物理宽度
赤蓝紫
2023/01/02
4600
移动端流式布局
Vue进阶之事件处理器[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/108665.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/19
5760
IOS、iPhone移动端,表单input聚焦时页面放大的解决办法
最近的一个项目中,发现几个页面在使用 iPhone 11 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大。
德顺
2019/12/02
7.5K0
【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )
京东手机端 https://m.jd.com/ 顶部提示 使用京东 APP 打开网页的提示 , 是通过 固定定位 放置在顶部的 ,
韩曙亮
2023/04/30
2.1K0
【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )
推荐阅读
相关推荐
h5页面适配iPhone X的方法
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档