【原】web移动端常用知识点笔记

摘要：因为平时搞移动端的比例多一点，做个小小的总结。虽然网上很多这方面的总结，不过还是想自己也总结一下，适合自己的才是最好的。这样也方便以后自己的查阅

viewport模板——通用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

 <!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari ios7.0版本以后，safari上已看不到效 -->

<meta content="yes" name="apple-mobile-web-app-capable">

<!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式  可选default、black、black-translucent-->

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<!-- 忽略将页面中的数字识别为电话号码 -->

<meta content="telephone=no" name="format-detection">

<!-- 忽略Android平台中对邮箱地址的识别 -->

<meta content="email=no" name="format-detection">

<title>标题</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

   内容

</body>

</html>

移动端字体font-family

body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

css3多文本换行，最后省略为 ...

p {

    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

解决ios下输入框为fixed的乱位

在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间。类似：

（请原谅盗图，我错了）

解决办法有如下两个：

1、可以在文本框获得焦点的时候将fixed改为absolute，失去焦点时在改回fixed，但是这样会让屏幕有上下滑动的体验不太好。

.fixfixed {

position:absolute;

}

$(document)

	.on('focus', 'input', function(e) {

        $(this).addClass('fixfixed');

	})

	.on('blur', 'input', function(e) {

       $(this).removeClass('fixfixed');

	})

2、还有一种就是用一个假的fixed的文本框放在页面顶部，一个absolute的文本框隐藏在页面顶部，当fixed的文本框获得焦点时候将其隐藏，然后显示absolute的文本框，当失去焦点时，在把absolute的文本框隐藏，fixed的文本框显示。

.fixfixed {

position:absolute;

}

$(document)

    .on('focus', 'input', function(e) {

        $absolute..show();

        $(this).hide();

    })

    .on('blur', 'input', function(e) {

         $fixed..show();

        $(this).hide();

    });

快速回弹滚动

在有滚动的地方加上下面这段css，滑动起来就会特别的顺畅。而不会出现那种一卡一卡的现象。主要还是针对ios机，个人觉得这个很实用

.div {

        overflow: auto;

        -webkit-overflow-scrolling: touch;

    }

ios和android局部滚动时隐藏原生滚动条

.ennobleList::-webkit-scrollbar {

  opacity: 0;

}

.ennobleList::-webkit-scrollbar:horizontal {

  opacity: 0;

}

禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

使用弹性盒子box布局

//css

.box {

    	display: box;

        display: -webkit-box;

        -webkit-box-align: center; // 设置里面的元素垂直居中

        -webkit-box-pack: center; // 设置水平居中

        width: 200px;

        height: 30px;

    }

    .box .box_flex1{

        box-flex: 1;

        -webkit-box-flex: 1;

        -moz-box-flex: 1;

        background: blue;

    }

    .box .box_flex2 {

        box-flex: 2;

        -webkit-box-flex: 2;

        -moz-box-flex:2;

        background: red;

    }

    .box .box_flex3 {

        box-flex: 1;

        -webkit-box-flex: 1;

        -moz-box-flex: 1;

        background: green;

    }

//html 

<ul class="box">

    <li class="box_flex1">1</li>

    <li class="box_flex2">2</li>

    <li class="box_flex3">3</li>

</ul>

自适应布局模式

为了适应不同分辨率的手机，我们不建议把宽度写死。而是采用自适应的布局。可以看看我的这篇博文

http://www.cnblogs.com/xianyulaodi/p/5533201.html

禁用 ios用户点击链接时，会出现一个半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

background-image和image的加载区别

　　在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，

而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image，

如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，

才开始加载背景图片，不会影响你浏览网页内容。

伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {

    background-color: transparent;

}

input[type=number]::-webkit-inner-spin-button {

     -webkit-appearance: none;

}

input[type=number]::-webkit-outer-spin-button {

     -webkit-appearance: none;

}

改变placeholder的颜色值

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

旋转事件和样式：

可以参考这篇文章：http://www.cnblogs.com/xianyulaodi/p/5533185.html

打电话和发短信：

打电话：//注意号码，不要乱搞

<a href="tel:110">打电话给:110</a>

发短信：

<a href="sms:110">发短信给: 110</a>

transition闪屏

在 Chrome and Safari中，修复使用CSS transforms 或者 animations时可能会有页面闪烁的效果

下面的代码可以修复此情况：

.cube {

   -webkit-backface-visibility: hidden;

   -moz-backface-visibility: hidden;

   -ms-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   -ms-perspective: 1000;

   perspective: 1000;

   /* Other transform properties here */

}

在webkit内核的浏览器中，可用下面的方法

.cube {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

  /* Other transform properties here */

}

长时间按住页面出现闪退

element {

  -webkit-touch-callout: none;

}

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

移动端点透问题

这个问题比较经典，小小总结

情景再现:

<div id="mask">点击测试</div>

<a href="#">www.baidu.com</a>

div是绝对定位的遮罩层，并且z-index比a要高，a是一个链接，跳转到百度。我们给div绑定一个tap事件

$('#mask').on('tap',function(){

     $('#mask').hide();

});

按照我们预想，遮罩层div消失了。但是当我们在a标签上点击遮罩层时，a链接被触发，跳转了。也就是出现我们所说的点透事件。

出现原因：

事件的触发顺序：touchstart >touchmove>touchend >click

也就是说，touchstart 早于 touchend 早于click。click在移动端有300ms延迟，，当我们tap触发之后遮罩层隐藏，此时 click还没有触发，300ms之后由于遮罩层隐藏，我们的click触发到了下面的a链接上，因而发生点透事件。

解决方法：

（1）尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
（2）使用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a标签的click
（4）实在不行就换成click事件

使用touchend事件解决方法，如下：

$("#mask").on("touchend", function (e) {

   e.preventDefault();

});

角标的实现：

类似于这种效果

下面是兼容安卓和ios的写法

<p class="rongqi">

    <span class="wenan">跟团游</span>

    <span class="script"></span>

</p>

/**css**/

.rongqi {//容器

    height: 15px;

    overflow: hidden;//设置超出隐藏

    position: absolute;

    top: 0;

    left: 0;

}

.wenan{//文案

    float: left;

    position: relative;    //设置相对定位

    z-index: 3;            //设置层级不被三角形挡住

    height: 15px;

    padding-left: 4px;

    line-height: 16px;

    color: #fff;

    font-size: 10px;

}

.script {

    width: 0;

    height: 0;

    border-right: 20px solid transparent;

    border-top: 30px solid #c59c53;    //这里的30px实际上远远超出容器的高度

    float: right;                      //就是为了高度超出被挡住做出梯形的效果，兼容各种机型

    margin-left: -9px;

}

图文标题

这种写法比较好的及时应用伪类的形式：css代码如下：

p{

    height:44px;

    line-height:45px;

    padding-left:40px;

}

p::before{

    content: '';

    display: inline-block;

    background: url("../img/xxx.png") center center no-repeat;

    background-size: contain;    //这里把背景图片尺寸设置成contain，不需要考虑图片拉伸的问题

    width: 14px;

    height: 18px;

    margin: 0 5px -4px 0;

}

当然，这里用定位也是可以的

还有类似于这种的布局：

可以用以下的方式，当然其他的方式也是可以滴：

/*html*/

<li class="ent-li">

    <img class="ent-img" src="img/1.png">

    <div class="left">主题门票</div>

    <div class="right">10</div>

</li>

/**css**/

.ent-li {

    margin-left: 45px;

    height: 44px;

    display: -webkit-box; //box布局并做好兼容

    display: box;

    position: relative;

}

.ent-li .left {

    -webkit-box-flex: 1; //box-flex:1控制宽度自适应

    box-flex: 1;

    text-align: left;

    line-height: 45px;

    font-size: 16px;

    color: #333;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.ent-li .right {    //右侧啥都不用管

    text-align: right;

    line-height: 45px;

    font-size: 12px;

    color: #999;

    padding-left: 10px;

}

虽然网上很多这方面的总结，不过这套总结是适合我自己的。方便以后自己查阅

未完待续，持续更新.....