1、弹出模态框，底部内容禁止滑动。
一开始想到的就是点击按钮，模态框出现时，给body内容加上overflow：hidden，在谷歌模拟器上这样是没有问题的，但是真机测试中不行，需要在当前模态框中加入
$('模态框').on('touchmove', function(e) {
e.preventDefault();
});
这个问题在移动开发中经常遇到，网上也有很多解决方法，但是今天终于找到便捷的解决方法了！
2、可输入的div
应用场景：在表单页面，需要输入文字很多的文本框，input不能换行，textarea虽然可以，但是它的高度不能随文本增加而增高（当然js可以实现），但是可以css实现的就不需要js了
处理方法：给div增加 contenteditable="true" 属性，但无法去除从网页粘贴过来内容的格式，用contenteditable="plaintext-only"，既可以只粘贴文字了,需要注意的是，在ios中，需要给当前元素加-webkit-user-select:text；属性，否则，会弹出软键盘，但是输入不了文字。
<!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、 打电话,发短信
<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等分辨率差别比较大的设备
@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、键盘
<input type="number" pattern="[0-9]*" />
<input type="password" pattern="[0-9]*" />
注意：只有number或者tel还是不够，只有加入正则，ios才会出现九宫格
7、flex布局
display: flex;
display: -webkit-box;
display: -webkit-flex;
注： 如果用flx布局必须要加后面两行，不加的话，ios版本为8的苹果机子页面会错乱（很严重！！！）
8、添加meta，使得网页在手机端能正常浏览
<!-- 设置缩放 -->
<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标签了
!(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);
网友评论