移动端页面在ios上经常出现的问题及解决办法
程序员文章站
2022-06-18 16:07:16
移动端页面在ios上经常出现的问题
头部有输入框,聚焦后固定定位失效,排版混乱
解决方法:
头部用绝对定位,中间内容部分设置高100%,给上padding,然后加上overf...
移动端页面在ios上经常出现的问题
头部有输入框,聚焦后固定定位失效,排版混乱
解决方法:
头部用绝对定位,中间内容部分设置高100%,给上padding,然后加上overflow:scroll让中间部分可以滚动,
注意:要看所有父盒子高度是否是100%
.top{ position: absolute; top: 0; left: 0; right: 0; z-index: 999; } .middle{ height: 100%; padding-top: 104px; overflow: scroll; }
input上传文件
问题:当有图片或者其他内容绑定到input上时ios点击触发不了上传文件的事件。
最初我的解决办法:
给绑定的label标签加边框,然后在中间加一个加号的图标,点击时一般点击不到图标,这样也能触发事件结构
样式
.picture-label { display: inline-block; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; margin-top: 0.14rem; text-align: center; color: #999; border: 2px dashed #ccc; border-radius: 0.2rem; }
最终解决办法:背景图
结构
样式
.picture-label { width: 1rem; height: 1rem; background-image: url(../assets/plus_side.png); background-size: 1rem; }