1.移动端自适应
移动端的自适应一般是根据rem实现的，rem是参考根元素去设置元素的像素。比如
1 2 3 4 5 6
| html{ font-size:16px; } h1 { font-size: 2rem;//32px }
|
此时的2rem为32px
根元素的像素值是根据设备像素比dpr和设备的宽度去决定的。
border值一般在移动端设置为1px，因为dpr的不同会显示为2px，因此border一般用after 去设置，如
1 2 3 4 5 6 7 8 9
| :border { content:"" position:absolute; top:0; left:0; width:1px; height:100%; transform:scaleX(.5);//设置左边距 }
|
2.单行溢出显示省略号&& 多行溢出显示省略号
1 2 3
| overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
1 2 3 4 5
| overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
3.分辨率
1
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
4.图片
尽量用css || icon || svg来替换图片
5.判断是否是手机端
1
| "ontouchstart" in window
|
6.移动端滚动不顺畅
1 2 3 4
| body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
|
7. 动画尽可能使用css实现
比如使用translate3d来开启GPU加速
8.消除transition闪屏
1 2 3 4 5
| -webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden; /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
|
9.利用padding-top:100%，给图片预留位置，防止页面重新渲染
10.添加分享到朋友圈缩略图
微信分享链接时，自动抓取缩略图方法： 需要一张300*300的图片, 并添加在 body下，微信会自动抓取这张图来作为缩略图显示，格式如下：
1 2 3
| <div id="wx_pic" style="display:none;"> <img src="assets/images/share.jpg"> </div>
|
11. 关闭ios键盘首字母大写
在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：
1
| <input type="text" autocapitalize="off">
|
11.ios中去掉元素被触摸时产生的半透明灰色遮罩
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
1
| a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
|
12.去除移动端输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
1 2 3 4 5
| input, textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */ }
|
13.移动端禁止选中内容
1 2 3 4 5
| .user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移动端不需要） */ -ms-user-select: none; /* IE 10+ */ }
|
14.移动端自动拨号
1 2
| <a href="tel:139xxxxxxxx">一键拨打号码</a> <a href="sms:139xxxxxxx">一键发送短信</a>
|
15.禁止将页面中的数字识别为电话号码
1
| <meta name="format-detection" content="telephone=no" />
|
16.忽略Android平台中对邮箱地址的识别
1
| <meta name="format-detection" content="email=no" />
|
17. 禁止调整字体大小
1
| body{-webkit-text-size-adjust: 100%!important;}
|
18.active兼容处理 即 伪类 :active 失效
方法一：body添加ontouchstart
方法二：js给 document 绑定 touchstart 或 touchend 事件
1 2 3 4 5 6 7 8 9 10 11 12
| <style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener('touchstart',function(){},false); </script>
|
19.启动画面
1 2
| <-- ios --> <link rel="apple-touch-startup-image" href="start.png"/>
|
20.强制横屏
1
| <meta name="screen-orientation" content="portrait">
|
1 2 3
| input[type="search"]::-webkit-search-cancel-button{ display: none; }
|
