移动端问题总结（二）

　　又过了两个多月，也又碰到了各种大大小小的问题。之前总结传送门：移动端问题初总结

　　相对于上次来说，这次的问题更多是细节了，有些问题不解决理论上其实也无伤大雅。但你奈何不了一个对自家产品强迫症到极点的BOSS，就算你跟他说某某某某大公司的页面也是这样的，那也还是得解决的。

　　1）区块内字体不能垂直居中，在移动端产生偏移

　　　  其实这个问题在之前就注意过，手机自带浏览器就有这样的情况。此时为了举例去看，已经没有这种写法了，想必也是觉得不够“优雅”。但是这种例子随便找找还是有的，发现BAT上基本都有这种元素，随手截下来，三者在IOS下均大致居中。其中腾讯算是处理的比较好的，但是也有局限，字体只能在12px以下，否则依然会看出来偏移。所以当你字体不得不更大一些时，又不得不处理这个问题时，那么就只能用js判断设备再进行设置了。当外框足够大或者字体足够小时，偏移都不那么明显。

　　2）字体大小与预设不一样

　　　　解决方法，给文本容器设置max-height。详细查看：移动端的字体大小与CSS中不符

　　3）缩略图不变形

　　　　文章详情中，图片没办法规定大小，那么在获取其缩略图时，自然也就有图片变形的情况了。因此去研究了微博的图片缩略图显示规则：居中显示，超出隐藏。当宽高比例大于预设的比例时，则设置图片高度为100%，否则设置宽度为100%。特地上传几张小图，发现新浪也直接进行放大了，因此我额外加上了判断，不进行放大。

　　　　HTML：　（其中.imgBox是为了控制排列方式）

<div class="imgBox">
    <!--每张图片单独一个div.img-->
    <div class="img">
        <img src="images/sf15.jpg" alt=""/>
    </div>
    <div class="img">
        <img src="images/sf14.png" alt=""/>
    </div>
    <div class="img">
        <img src="images/sf01.jpg" alt="" />
    </div>
    <div class="img">
        <img src="images/sf65.jpg" alt="" />
    </div>
</div>

　　　　CSS：

.img {
    /*此尺寸需要UI,不同的图片数量只需要更改宽高即可*/
    width: 23%;
    height: 200px;
    overflow: hidden;
    margin: 100px auto;
}
.img img {
    position: relative; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%);
}
.imgBox {
    display: -webkit-flex; display: flex; justify-content: space-between; 
}

　　　　JS：

/*等比例缩小*/
$('.img').each(function(){
    var length = $(this).find('img').length;
    var wd = $(this).width();
    var hg = $(this).height();
    var $img = $(this).find('img');
    /*如果小于.img 则不做任何操作，保持居中即可*/
    if($img.width()*hg > $img.height()*wd && $img.width() > wd ){
        $img.height('100%');
    }else if($img.width()*hg < $img.height()*wd && $img.height() > hg ){
        $img.width('100%');
    }
})

　　　　最后结果：

　　4）position: fixed的div中内容过长时，可滚动查看

　　　　给这个div设置 overflow: auto; height: 100%; 即可，两者缺一不可。

　　好了，第二集就到这了~~希望自己收获越来越多。