移动端背景无法固定解决方案
body:before {
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(...) center 0 no-repeat;
background-size: cover;
}
如何去掉ios里面输入框输入时的灰色背景
<meta name="msapplication-tap-highlight" content="no">
关闭ios键盘首字母大写
<input type="text" autocapitalize="off"/>
禁止文本缩放
html{-webkit-text-adjust:100%}
移动端如何清除输入框内阴影在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,textarea{border:0,-webkit-appearance:none}
忽略页面的数字为电话，忽略email识别
<meta name="format-detection" content="telephone=no, email=no"/>
移动端禁止选中内容
div {
-webkit-user-select: none;
}
移动端取消touch高亮效果在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：
.xxx {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
如何禁止保存或拷贝图像通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：PS：需要注意的是，该方法只在 iOS 上有效。
img {
-webkit-touch-callout: none;
}
解决字体在移动端比例缩小后出现锯齿的问题
-webkit-font-smoothing: antialiased;
栅格布局：
box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局
.按钮被按下效果的实现需要给a标签加a:active属性和添加一段空函数
document.body.addEventListener('touchend', function () { })
audio元素和video元素在ios和andriod中无法自动播放应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
手机拍照和上传图片<input type="file">的accept 属性
<input type=file accept="image/*">
有关Flexbox弹性盒子布局一些属性不定宽高的水平垂直居中
.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%)；
border-radius:6px;
background:#fff;
}
[flexbox版]不定宽高的水平垂直居中
.xx{
justify-content:center;//子元素水平居中，
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
.单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}
使用流体图片
img{
width:100%;
height:auto;
width:auto\9;
}
一像素边框（例子:移动端列表的下边框）
.list-iteam:after{
position: absolute;
left: 0px;
right: 0px;
content: '';
height: 1px;
transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-webkit-transform:scaleY(0.5);
background-color: #e3e3e3;
}
除去移动端点击的背景颜色
-webkit-tap-highlight-color:rgba(0,0,0,0);
文字对齐
使用after，before伪元素：
div:after{
content:"",
display:inline-block;
width:100%
}
用max-width来防止图片撑破容器
img{
display:inline-block;
max-width:100%;
}
用pointer-event来禁用事件
该属性可以做以下事情：
阻止任何点击动作的执行
使链接显示为默认光标
阻止默认hover和active状态
阻止js点击事件的触发
.disabled{pointer-events:none;}
禁止文本选中
body{user-select:none}
http://www.qdfuns.com/notes/47381/e7822d9464795e332f244a8804855509.html
.使用 rem时，设某个 div比如的 height:3rem;line-height:1.5rem;overflow:hidden;时，在某些 android手机上可能会出现显示不止两行,第三行会显示点头部。 解决：利用 js获取文字 line-height再去设置 div高度
3.有些版本的 iphone4中， audio和 video默认播放事件不会触发，比如使用 window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放，比如
$(document).one('touchstart',function(){
audio.play();
})
4.想要在 touchmove:function(e,参数一)加一个参数，结果直接使用 e.preventDefault()就会 e 报错，处理方法为
touchmove:function(e,参数一){
var e=arguments[0] e.preventDefault()
}
7.当弹窗出现时，想禁止屏幕的滑动，给那个遮罩层添加 touchmove事件即可，用 e.preventDefault()会阻止的 scroll， click等事件，消失时再 off掉，
$(".body_cover").on("touchmove", function(e) {
e.preventDefault();
});
8.使用 input file上传文件时，可以指定接受的类型， accept="image/png,image/jpeg,image/gif" ，同时在 android上默认不能使用相机，可以加 capture="camera" 同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。
.微信里假如页面一使用 ajax获取数据，当你进入下一页面再按返回键返回页面一的时候，有些情况不会去请求 ajax数据，会使用缓存，然而 ajax来的数据又并没有存在缓存里。要设置 cache:false（iphone、android的某些手机都可能出现）
7.在微信 js config的时候，如果 URL的参数有如 ?a={"param": "1"},会导致签名失败。给参数用 encodeURIComponent编码后再传过去也是失败！研究了好久。（后台代码没做任何修改，只在我前端修改代码）。所以最后还是使用了 ?param=1这样的格式
/*判断是否安装了flash*/
function flashChecker()
{
var hasFlash=0; //是否安装了flash
var flashVersion=0; //flash版本
if(document.all)
{
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if(swf) {
hasFlash=1;
VSwf=swf.GetVariable("$version");
flashVersion=parseInt(VSwf.split(" ")[1].split(",")[0]);
}
}else{
if (navigator.plugins && navigator.plugins.length > 0)
{
var swf=navigator.plugins["Shockwave Flash"];
if (swf)
{
hasFlash=1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i)
{
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return {f:hasFlash,v:flashVersion};
}
var fls=flashChecker();
if(fls.f) document.write("您安装了flash,当前flash版本为: "+fls.v+".x");
else document.write("您没有安装flash");
针对适配等比缩放的方法:
@media only screen and (min-width: 1024px){
body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;}
}
http://www.cnblogs.com/PeunZhang/p/3407453.html
viewport-fit解决iphoneX的“刘海”问题
解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕
4、window.open 坑爹指数：★★★
由于它打开的页面是popup类型，导致部分手机浏览器会阻挡并拦截弹窗，根本弹不出来，接下去的步骤就无法完成了。
解决：使用字符串的 window.location.href 函数替代
http://qiaolevip.iteye.com/blog/2306090华为手机不兼容js问题
