1、弹出模态框，底部内容禁止滑动。

一开始想到的就是点击按钮，模态框出现时，给body内容加上overflow：hidden，在谷歌模拟器上这样是没有问题的，但是真机测试中不行，需要在当前模态框中加入

1
2
3
4
5
$('模态框').on('touchmove', function(e) {

    e.preventDefault();

});

这个问题在移动开发中经常遇到，网上也有很多解决方法，但是今天终于找到便捷的解决方法了！

2、可输入的div

应用场景：在表单页面，需要输入文字很多的文本框，input不能换行，textarea虽然可以，但是它的高度不能随文本增加而增高（当然js可以实现），但是可以css实现的就不需要js了

处理方法：给div增加 contenteditable=”true” 属性，但无法去除从网页粘贴过来内容的格式，用contenteditable=”plaintext-only”，既可以只粘贴文字了,需要注意的是，在ios中，需要给当前元素加-webkit-user-select:text；属性，否则，会弹出软键盘，但是输入不了文字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            div{
                width:300px;
                border:1px solid #666;
                font-size:20px;
                color:blue;
                line-height:40px;
                outline: none;
       
              padding: 10px;
            }
            div:empty:before{
               content: attr(placeholder);
               color:#ccc;
            }
            div:focus:before{
               content:none;
            }
        </style>
    </head>
    <body>
        <div contenteditable="plaintext-only" placeholder="请输入内容"></div>
    </body>
</html>

3、 打电话,发短信

1
2
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>

4、rem px 移动端适配问题
移动端字体单位font-size选择px还是rem
　　对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
　　对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较大的设备

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media screen and (max-width: 321px) {
    body {
        font-size: 16px;
    }
}
@media screen and (min-width: 321px) and (max-width: 400px) {
    body {
        font-size: 17px;
    }
}
@media screen and (min-width: 400px) {
    body {
        font-size: 19px;
    }
}
<script>
    // px与rem单位的换算
    (function(){
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    })();
</script>

5、移动端 1px border 实现
部分安卓机器(比如小米)的分辨率低，如果border的宽度小于1px。安卓机出现一种边框消失了的现象。样式上有点奇怪，IOS没有这个问题。
由于设备高分辨率屏的原因，逻辑像素的 1px 的 border 在移动设备上会用两个或三个物理像素来表示，所以看起来会感觉很粗。解决方案有很多，但兼容性最好的方案是用伪元素的 box-shadow 或 border 实现 border，然后用 transform: scale(.5) 缩小到原来的一半
6、键盘

1
2
<input type="number" pattern="[0-9]*" />
<input type="password" pattern="[0-9]*" />

注意：只有number或者tel还是不够，只有加入正则，ios才会出现九宫格
7、flex布局

1
2
3
display: flex;
display: -webkit-box;
display: -webkit-flex;

注： 如果用flx布局必须要加后面两行，不加的话，ios版本为8的苹果机子页面会错乱（很严重！！！）
8、添加meta，使得网页在手机端能正常浏览

1
2
3
4
5
6
7
8
<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection" content="telephone=no, email=no" />

9、使用rem时js动态计算自动生成meta标签，这里是一段阿里高清方案，使用时需要放到文档头部，此时就不用再写meta标签了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
!(function(e) {
	function t(a) {
		if (i[a]) return i[a].exports;
		var n = (i[a] = { exports: {}, id: a, loaded: !1 });
		return e[a].call(n.exports, n, n.exports, t), (n.loaded = !0), n.exports;
	}
	var i = {};
	return (t.m = e), (t.c = i), (t.p = ''), t(0);
})([
	function(e, t) {
		'use strict';
		Object.defineProperty(t, '__esModule', { value: !0 });
		var i = window;
		(t['default'] = i.flex = function(normal, e, t) {
			var a = e || 100,
				n = t || 1,
				r = i.document,
				o = navigator.userAgent,
				d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
				l = o.match(/U3\/((\d+|\.){5,})/i),
				c = l && parseInt(l[1].split('.').join(''), 10) >= 80,
				p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
				s = i.devicePixelRatio || 1;
			p || (d && d[1] > 534) || c || (s = 1);
			var u = normal ? 1 : 1 / s,
				m = r.querySelector('meta[name="viewport"]');
			m || ((m = r.createElement('meta')), m.setAttribute('name', 'viewport'), r.head.appendChild(m)),
				m.setAttribute(
					'content',
					'width=device-width,user-scalable=no,initial-scale=' +
						u +
						',maximum-scale=' +
						u +
						',minimum-scale=' +
						u
				),
				(r.documentElement.style.fontSize = normal ? '50px' : a / 2 * s * n + 'px');
		}),
			(e.exports = t['default']);
	}
]);
flex(false, 100, 1);