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);
来源: http://www.jianshu.com/p/060a93d1f6b5