前端开发一起交流QQ群：740034288
1、对于图片加载很慢，手机端常用canvas方法加载加载图片；
2、防止手机中网页放大和缩小：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
3.设置Web应用是否以全屏模式运行：content="yes"为全屏模式，false为非全屏。通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
<meta name="apple-mobile-web-app-capable" content="yes/false">
4、启用或者禁止自动识别页面的电话号码：telephone=no为禁止；
<meta name="format-detection" content="telephone=no">
5、h5调用安卓或者ios的拨号功能：
<a href="tel:10010">10010</a>
6、滑动滚动条时卡顿，慢：
body{
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}
7、禁止复制，选中页面：
*{
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
8、长按页面出现闪退：
element{
-wekit-touch-callout:none;
}
9、iphone及ipad下输入框默认内阴影:
element{
-webkit-appearance:none;
}
10、ios和android下触摸元素时出现半透明灰色遮罩:
element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
11、active兼容处理 即 伪类 :active 失效:
方法一：body添加ontouchstart <body ontouchstart="">;
方法二：js给 document 绑定 touchstart 或 touchend 事件 document.addEventListener('touchstart',function(){},false);
12、动画定义3D启用硬件加速:
element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
13、旋转屏幕时，字体大小调整的问题:
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
14、transition闪屏:
/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
-webkit-backface-visibility:hidden
15、某些Android手机圆角失效:
background-clip: padding-box;
16、设置缓存:手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
<meta http-equiv="Cache-Control" content="no-cache" />
17、ios 设置input 按钮样式会被默认样式覆盖：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
18、IOS键盘字母输入，默认首字母大写：
<input type="text" autocapitalize="off" />
19、移动端 HTML5 audio autoplay 失效问题：
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
20. 移动端video视频播放全屏，无缝边界：
<video id="videoID" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5"
x5-video-player-fullscreen="true" width="100%" height="100%" preload="auto" poster=""
src="./../media/detail.mp4" style="object-fit: fill"></video>
21. 视口：
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
22. <% %>：在html里面直接渲染逻辑js代码：
<select>
<option value="">请选择您称号</option>
<%
var option = '隔壁老王/实力C位/球场颜狗/足球毒奶/日常加班狗/坐优享的处女座/杠精/表情包小王子/你爸爸/精致猪猪女孩/吃不胖的小仙女/隐形贫困人口'
var options = option.split('/')
for(var i = 0; i < options.length; i++) {
%>
<option value="<%-options[i]%>"><%-options[i]%></option>
<%
}
%>
</select>