ios兼容性问题（1）-微信input，拍照上传头像，页面顶部出现白色遮挡

最新推荐文章于 2023-11-13 09:43:11 发布
最新推荐文章于 2023-11-13 09:43:11 发布
阅读量533 收藏
点赞数 1
文章标签： javascript css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44568532/article/details/108236186
版权

ios兼容性问题（1）-微信input上移至顶部，拍照上传头像，页面顶部出现白色遮挡

  1. 最外层盒子不能使用margin-top属性，设置margin，会出现所设置的值的白色遮盖
  2. 拍照上传图片–头像，ios中1.3.4版本以下，会出现图片旋转问题，在1.3.4以上已经没有这个问题，所以需要处理需要判断版本，可采取字符串截取进行比对，旋转处理方法使用Exif组件，网上有很多使用exif的方法
  3. 微信小程序中的Input在ios中会出现文字input焦点丢失问题，解决方法：input 加入 auto-focus
<input bindchange="inputChange"
									auto-focus label
最低0.47元/天 解锁文章
PPC的小心思
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中的ios兼容性问题
03-29
1.ios中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.ios中滚动卡顿 设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决ios中new Date() 时间格式不兼容 ...
微信小程序-ios系统-下拉上拉出现白色，如何处理呢？
03-29
这几天做小程序，有些页面都是全屏的背景，在安卓上背景是固定的，而在ios上上拉下拉出现白色，测试说体验不太好，一开始我以为是下拉上拉刷新造成的，关闭了依然是这样。为了体验好点，可以按一下解决： 方式一： ...
H5接入到微信小程序或者微信浏览器打开相机界面会白屏刷新
qq_21048115的博客
11-13 1447
前端同事们开发这个功能嵌入到小程序后会有bug，只要打开相机拍照后返回界面，界面会白屏刷新并且返回到了上一级，前端同事查询微信论坛或者其他地方的问答都说是手机内存不足或者运行的软件太多导致的，但只留一个微信也会如此。因为我用的iPhone调试的，发现打开相册的时候，前端页面不会全部覆盖，但是打开相机页面会被覆盖，所以我猜测是不是打开相机就是相当于覆盖了当前的页面。
小程序开发安卓/ios兼容踩坑合集
老古懂的博客
01-03 1777
小程序ios兼容踩坑记录
小程序选择图片会覆盖原有图片解决办法
st526403649的博客
12-10 1653
小程序选择图片
解决在 IOS 页面点击 input 白屏问题
大猩猩X
10-13 1908
在IOS 下点击input界面空白解决方法 解决方法： 如果使用了 position 定位，检查父元素是否有加上 position: relative; 如果以上不能解决，给 input 加上 input { // 解决在 ios 下点击 input 页面空白问题 -webkit-transform: translateZ(0); transform: translateZ(0);...
input 上传图片显示预览、调用摄像头，ios和Android的兼容性解决
qq_39430589的博客
10-24 7238
input type="file" id="camera" multiple="multiple"capture="camera" accept="image/*" > $(function () { //解决上传图片时capture="camera"在安卓与IOS的兼容性问题（在IOS只能拍照，不能选相册） var ua = navigator.userAgent.toLower
微信小程序中遇到的iOS兼容性问题小结
12-12
在微信小程序的开发过程中，iOS系统的兼容性问题常常会给开发者带来困扰。这些问题主要涉及用户界面显示、滚动性能以及日期时间处理等关键环节。下面将详细分析这些常见的iOS兼容性问题及其解决方案。 1. **iOS中`...
微信小程序嵌入H5页面播放监控webrtc视频流1~2秒画面延迟,安卓和ios都兼容
最新发布
04-23
在微信小程序中嵌入H5页面来播放监控视频流，特别是使用WebRTC技术，可能会遇到1到2秒的画面延迟问题，而这个问题需要针对iOS和Android两大操作系统进行优化以实现良好的兼容性。以下将详细探讨这一主题，以及如何...
苹果手机顶部安全区兼容
qq_46956509的博客
04-07 865
html: <div class="van-safe-area-inset-top"></div> css: @supports (top: env(safe-area-inset-top)) { .van-safe-area-inset-top { height: constant(safe-area-inset-top); height: env(safe-area-inset-top); } }
input-file 部分手机不能拍照问题
weixin_30751947的博客
04-18 709
曾经遇到一个需求，用户拍身份证上传验证， 然后我卡在了拍照这个点上。 最初采用的是微信的 api，wx.chooseImage， 但随后发现，返回的是一种只有微信才能预览的 url 格式， 但验证是要放在 PC 上进行的，等于保存了这个 url 也没法看呀。 然后详细看了遍文档，看上去好像是说可以先上传到微信然后就可以下载到本地了， 于是又带着吐槽启用了另两个微信 api，wx....
在微信移动端input file拍照或从相册选择照片后会自动刷新页面退回到一开始网站进入的页面...
weixin_34367845的博客
01-18 4546
<input type="file" accept="image/*"/> 调用打开摄像头后，聚焦后拍照，点击确认，这时页面会出现刷新动作，然后回退到网站一开始进入的首页，同时localstorage,session,cookie保存的内容都会被清空。 参考文章：https://blog.csdn.net/u013803303/article/details/47316139...
微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
前端之路的博客
12-26 958
标题 微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
html input 上capture 参数在 安卓 苹果上的异同
weixin_30340775的博客
07-08 961
安卓上 <input type="file" accept="image/*" capture="camera"> //只调用相机 <input type="file" accept="video/*" capture="camcorder">//只调用摄像机 <input type="file" accept="audio/*" ...
解决input file上传图片，部分手机拍照或者本地图片无法上传（图片太大，需要上传之前先压缩）
sunbeibei00000的博客
06-19 2170
现在一般手机拍的照片都好几兆,图片文件太大会非常影响上传速度或者根本上传不上去，故上传图片前需要先进行压缩，这里使用的是lrz.js（lrz.js文件这里就不提供了） <input type="file" style="display: none;" id="unloadBtn" accept="image/*" onchange="getImg(this)"> <a href="javascript:;" onclick="uploadImg()" id="result"> &l
IOS H5 input标签上传图片 onchange不执行
weixin_39313771的博客
05-06 1018
项目记录：ios h5上传图片onchange不执行 找了一些文章发现：ios safair 浏览器中，必须将 input 添加到 真实的dom 中，onchange事件才会响应 然后成功啦！！！！！ 如果还不可以，就找找其他原因把！ ...
input 属性开启手机前置摄像头拍照
Bright2017的博客
04-25 3903
最近有个需求，需要做人脸识别，不用太过复杂，只需要拍照上传，和人脸对比接口进行对比即可。 调用摄像头这里让我很郁闷，因为要开启前置摄像头。原本打算使用Web AP( MediaDevices.getUserMedia)，但是这个不能拍照，可以开启摄像头然后Canvas截图保存，但是不适合移动端。 解决办法： //1.开启视频录像 <input type="file" accept=...
关于ios5上的浏览器无法上传图片的问题
星.云计算
07-12 235
大家都知道ios5上的浏览器（包括safari）是无法上传附件的。这个是因为苹果公司并没有支持 input file 这个控件 ，在这个版本上。但是在ios6.0版本上就已经支持了input file 控件。 但是对ios5用户如果想通过safari上传图片（比如想访问facebook，twitter网页版），怎么办呢。 我推荐几种方法： 方法一： 如果是未越狱版本：直接去 app st...
微信小程序自定义拍照和H5调用摄像头拍照
minalz的博客
03-31 7676
微信小程序自定义拍照的 微信小程序代码： <camera mode="normal" device-position="{{direction}}" flash="auto" binderror="error" class="info-camera"> <cover-view class="controls"> <cover-image src=".....
ios 微信中tabbar遮挡页面了
09-07
在iOS微信中，当我们打开应用的某个页面时，有时会出现TabBar遮挡住页面的情况。这可能是因为页面布局的问题或者微信版本的bug导致的。 要解决这个问题，我们可以尝试以下几种方法： 1. 检查页面布局：首先，我们需要检查页面布局，确保页面内容不会超出屏幕底部。可以通过调整页面布局的方式，使得TabBar不会遮挡住页面内容。 2. 使用适配屏幕的布局方式：我们可以使用AutoLayout或者相对布局等方式，根据屏幕的尺寸来动态调整页面的布局，确保页面内容在不同尺寸的屏幕上都能正确显示，避免遮挡问题。 3. 更新微信版本：如果确定是微信版本的bug导致的遮挡问题，那么可以尝试更新微信版本到最新的版本。通常，微信会不断更新修复bug和改进用户体验，更新到最新版本可能会解决问题。 4. 反馈问题给微信官方：如果以上方法都无法解决问题，我们可以通过微信官方渠道反馈问题。可以选择在微信中点击右上角的"我-设置-关于微信-帮助与反馈"选择具体问题进行反馈，希望微信官方能够及时解决问题。 总之，当我们在iOS微信中出现TabBar遮挡页面的问题时，可以通过检查页面布局、调整布局方式、更新微信版本或者反馈给微信官方等方式来解决这个问题，确保页面内容能够正确显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值