ios移动端开发的坑

红钢發表於 2019-10-13 16:41:00

写在前面：人的懒惰真的可以消磨掉好多时间呀～
本文主要记录了在工作中一些关于开发过程中遇到的坑 
1.使用vue开发项目时候图片img 在ios端出现不显示的情况
<div class="cnblogs_code">
<pre> <img src="https://static.xxx.com/upload/png/0a/cf/0acf4e4e3c35fa2dc631352f3c884c46.png" alt="">
//样式
img {
 width: 30px;
 height: 30px;
 }</pre>
</div>
<div>在ios端会存在图片加载不出来的情况，具体是为啥呢？？可能和系统加载img 图片的机制有原因吧, 但是使用原生的html开发，采用的gulp去解析，就不会有整个问题，问题出现就要解决</div>
<div>
<div> path1:分析了出现图片，加载出来的图片都是通过background 填充到页面的上去，emmmm 背景就会正常的显示</div>
<div>
<div class="cnblogs_code">
<pre>background-image: url('https://static.xxxx.com/upload/png/d2/79/d279a6d8db305c841b46e9e9cf04a825.png');
background-size: 750px 2529px;</pre>
</div>
 分析在图片时候，如果是纯图片，无文字，可以通过background的方式去渲染出图片，但是这一种方式也不是全部的适用，因为background加载在html渲染后，所以html渲染完成后，如果网速过慢，img的图片就会显示不出来，导致页面含有背景的部分是空白的，会影响到体验，在一些其他的方面是不适用的，比如图片验证码，
path2:在img标签外部增加一个块级元素
<div class="cnblogs_code">
<pre> <div class="red_top">
 <img src="https://static.xxxx.com/upload/png/a7/6f/a76f91d68439dabebae9d0a676456f86.png" alt="">
</div>
//样式区域写法这样就完美的解决了原理就在于外面的个块元素可以设置宽高 img会以父元素的宽度为准显示
.red_top {
 height: 288px;
 width: 750px;
 img {
 display: block;
 width:100%;
 height:100%;
 //里面不能加东西呀比如border其他的属性等
 }
}</pre>
</div>
对比疑问：标签img和background 到底有什么区别呢？
     主要大区别用途：img元素占位置可被搜索引擎抓取 background-image 则装饰图片，需要手动设置大小才会占位置，跟随所在元素的大小，占据了元素的全部尺寸，比较细致的介绍可以https://blog.csdn.net/sun_dongliang/article/details/79992386 进行查看
2.输入框问题 
 相信很多的开发者都会遇到过输入框时候各种问题，ios的软键盘下落时候剩余一个小背景，ios软键盘遮住输入框部分。
<div>
 ios端关闭软键盘，导致页面表单底部有块空余灰色那部分就是背景，在点击表单的时候没反应，可能软键盘拉起的时候一直存在一个蒙层，落下后，导致蒙层没有消失。焦点错误等问题。
</div>

<img src="https://img2018.cnblogs.com/blog/1269507/201910/1269507-20191013163838265-978348477.png">
 

</div>
<div>
path1:让输入框输入焦点后自动滚动到原来位置
<div class="cnblogs_code">
<pre>function blur(){
window.setTimeout(function(){
 window.scrollTo(0,document.body.clientHeight);
}, 500);
};</pre>
</div>
<pre>解决了背景被遮挡的问题，但是出现了一个输入框被部分遮挡这样每次定义num 就差不多的可以解决了</pre>
<div class="cnblogs_code">
<pre>// 获得焦点，window滚动到0，可以自定义位置
function focus(){
window.setTimeout(function(mun){
 window.scrollTo(0,num);
}, 500);
};</pre>
</div>
<div>至于blur失去焦点事件，一定要记得需要加载最后一个元素输入框上，如果按照正常的流程，加在上面的输入框，失去焦点后就会将键盘收起，影响到用户的使用。</div>
<div>3.穿透事件 ios对于弹层的支持并不友好，滑动弹层的时候，可能弹层的上部分和下部分都会出现一些问题，影响使用，所以更好的进行测试，需要个人将自己的弹层的内部滚动，外边的大元素不进行滚动
<div class="cnblogs_code">
<pre>.big-wrapper {
height: 100%;
position: fixed;
top: 0;
left: 0
}

.small-wrapper {
height: 90%;
position: absolute;
width: 80%;
top: 50%;
left: -50%;
transform: translate(-50%, -50%);
min-height: 90%;
overflow: scroll;
}</pre>
</div>
 
</div>
<div>
 
</div>


 
</div>
</div>

　　

</div>
<div id="MySignature" role="contentinfo">
不该看的不看，不该说的不说，不该听的不听，不该想的不想; 
来源：https://www.cnblogs.com/mfyngu/p/11666982.html

頁: [1]

琼殿技术论坛's Archiver

ios移动端开发的坑