一些常见问题以及解决方案

[bytemofan]

目录

• 多行文本省略
• 移动端1px解决
• rem自适应布局方案
• 输入框调起时fixed失效

多行文本省略

如果只是单行的话

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

部分浏览器还需要加上width属性。

行数>1的文本省略

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器），可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp，这是个不规范的属性。这种方式比较是个webkit内核的浏览器。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

常见的需要结合的属性：

• display:-webkit-box:必须结合的属性，将对象作为弹性伸缩盒子模型显示.
• -webkit-box-orient:必须结合的属性，设置或检索伸缩盒子对象的子元素的排列方式。
• text-overflow:ellipsis:可以设置当内容溢出时，使用省略号...隐藏超出范围的文本。

具体如下：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

多行文本省略并不是webkit的专属（跨浏览器解决方案）

设置相对定位的容器高度，用包含省略号(…)的元素模拟实现:

p {
    position:relative;
    line-height:1.4em;
    /* 设置高度为行高的3倍，表示只显示3行 */
    height:4.2em;
   overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(ellipsis.png) repeat-y;
}

ellipsis.png是类似这样的一张图：

这里注意几点：

1. height高度真好是line-height的3倍；
2. 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
3. IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；
4. 要支持IE8，需要将::after替换成:after；

JavaScript解决方案

js的解决方案则可以根据跨浏览器的方案实现，已经有了现成项目或插件实现了：

• Clamp.js
• jQuery插件jQuery.dotdotdot

移动端1px解决

移动端1px变粗的原因

viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.

也就是罪魁祸首就是设备像素比（window.devicePixelRatio），即：

设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

实现移动端1px边框有以下几种方式:

背景图渐变

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
  .good-content {
     border: none;
     background-image: -webkit-linear-gradient(90deg,#e000,#00 50%,transparent 50%);
     background-image: -moz-linear-gradient(90deg,#000,#e000 50%,transparent 50%);
     background-image: -o-linear-gradient(90deg,#000,#000 50%,transparent 50%);
     background-image: linear-gradient(0,#000,#000 50%,transparent 50%);
     background-size: 100% 1px;
     background-repeat: no-repeat;
     background-position: bottom
   }
}

背景图图片

@mixin onepxUseImage($selector, $position: bottom, $color: #666, $onepxImgDirname: './img/linenew.png') {
  #{$selector} {
    border-#{$position}: 1px solid $color;
  }

  @media only screen and (-webkit-min-device-pixel-ratio:2) {
    #{$selector} {
      border-#{$position}: none;
      @if $position == 'bottom' {
        border-width: 0 0 1px 0;
        -webkit-border-image: url($onepxImgDirname) 0 0 2 0 stretch;
        border-image: url($onepxImgDirname) 0 0 2 0 stretch;
      } @else if $position == 'top' {
        border-width: 1px 0 0 0;
        -webkit-border-image: url($onepxImgDirname) 2 0 0 0 stretch;
        border-image: url($onepxImgDirname) 2 0 0 0 stretch;
      } @else if $position == 'right' {
        border-width: 0 1px 0 0;
        -webkit-border-image: url($onepxImgDirname) 0 2 0 0 stretch;
        border-image: url($onepxImgDirname) 0 2 0 0 stretch;
      } @else if $position == 'left' {
        border-width: 0 0 0 1px;
        -webkit-border-image: url($onepxImgDirname) 0 0 0 2 stretch;
        border-image: url($onepxImgDirname) 0 0 0 2 stretch;
      }  
    }
  }
}

js判定支持0.5px

iOS8以上的才支持，所以：

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
var v =(navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
version = parseInt(v[1], 10);    
if (version >= 8) {
        document.documentElement.classList.add('hairlines')
    }
};

rem解决方案

根据屏幕大小及dpi调整缩放和大小:

(function () {
        var scale = 1.0;
        var ratio = 1;
        if (window.devicePixelRatio >= 2) {
            scale *= 0.5;
            ratio *= 2;
        }
        var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' +scale+',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';
        document.write(text);
        document.documentElement.style.fontSize = 50 * ratio + "px";
    })();

scale缩放的方式

全能型写法
@media (-webkit-min-device-pixel-ratio: 2){
  .border-bottom::after {
     border-bottom-width: 1px;
  }
  .border:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: -100%;
    bottom: -100%;
    left: 0;
    border: 0 solid #e1e1e1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    width: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
   }
}
 
满足一般需求可以使用这个
@media (-webkit-min-device-pixel-ratio: 2)
.border:after {
    height: 1px;
    content: '';
    width: 100%;
    border-top: 1px solid #e1e1e1;
    position: absolute;
    bottom: -1px;
    right: 0;
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
}

rem自适应布局方案

手机端页面自适应解决方案—rem布局（进阶版）

输入框调起时fixed失效

<body class="layout-scroll-fixed">
    <!-- fixed定位的头部 (absolute绝对定位也可以)-->
    <header>

    </header>

    <!-- 可以滚动的区域 -->
    <main>
        <div class="content">
        <!-- 内容在这里... -->
        </div>
    </main>

    <!-- fixed定位的底部 （absolute绝对定位也可以）-->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

css样式：

header, footer, main {
    display: block;
}

header {
    position: fixed;//或者absolute
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;//或者写成absolute
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
 overflow-y: scroll;
  /* 增加该属性，可以增加弹性，是滑动更加顺畅 */
  -webkit-overflow-scrolling: touch;   
}

main .content {
    height: 2000px;
}