欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端页面在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;
	}