移动开发知识

app应用前端开发要注重meta标签
webkit内核中有一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 。

//去除Android平台中对邮箱地址的识别怎么做

//作用是让普通移动网页被添加到主屏幕后

舍弃CSS float属性
在项目开发过程中可以会遇到内容排列显示的布局，假如你遇见这样的视觉稿，建议你放弃float，可以直接使用display:inline-block。

利用CSS3边框背景属性
在app的前端开发中，这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写， 这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。

使用webkit-box
webkit为display属性提供了一个webkit-box的值，做到盒子模型灵活控制。

很多属性极限突破可以使用缩放，倾斜这种手段来hack，比如最小字体，比如各种自己画的伪类图标。
能css画的不要用图。
能flex布局的不要用浮动，不要用绝对定位（不利于页面布局的扩展）

移动端的字体默认为16px，那么1rem我想表示为10px的话，我们就需要10%16=0.625即为62.5%，这样就可以比较方便的把设计稿里的px转换成rem单位来做到自适应了。这样无论用户如何设置电脑或者手机的默认字体大小，设置为rem的单位的长度都会随比例变化。

meta viewport 有6个属性如下：
width:设置layout viewport的宽度，为一个正整数，或字符串”width-device”
initial-scale: 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale: 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数
height: 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable: 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection" />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

块级化a标签
请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

如何去除iOS和Android中的输入URL的控件条
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

如何检测用户是通过主屏启动你的webapp
iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp时，navigator.standalone为true， 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问我们的webapp的。

如何关闭iOS中键盘自动大写
根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

iOS中如何彻底禁止用户在新窗口打开页面
有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

iOS中如何禁止用户保存图片复制图片
为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存复制你的图片了。

iOS中如何禁止用户选中文字
我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。

iOS中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。

如何解决盒子边框溢出
当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

如何解决Android 2.0以下平台中圆角的问题
如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。
在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：
-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！

如何解决android平台中页面无法自适应
虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下meta标签：

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />

如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！

拿到设计师的640px的设计稿后，虽然iphone4的分辨率是960x640px，但是其屏幕的像素密度比较高，它的实际大小应该 是减半的。所以在写代码时一切的高度字号都要是设计稿的1/2。接着说百分比布局：

1
element{
        width: 100%;
        padding-left: 10px;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        border: 1px solid blue;
}

rem设置字体大小；
em：em是相对单位，em相对的基准点就是浏览器的字体大小（浏览器默认字体为16px），所以1em默认等于16px。那么14px＝0.875em;公式是14/16=0.875em。用em来写的话，就可以解决ctrl+，ctrl-时造成的页面错乱问题。

1
html { font-size: 100%; }
.box-0 {
    height: 1em; /* 此时height等于16px */
}
.box-1 {
    font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
    height: 1em; /* 此时实际height等于10px */
}

rem：rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认 1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推 …（当然万恶的ie678不支持rem，但是还好我们在做的是移动端web页面）

渐变（这个在做按钮的时候很常用）

1
element{
        background-image: -moz-linear-gradient(top, #2288cc, #389de2); /* Firefox */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #389de2), color-stop(1, #2288cc)); /* Saf4+, Chrome */
}

掉手持设备点击时出现的透明层 （一般会在头部做格式化）

1
a,button,input{
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent; /* For some Androids */
}

在应用了此属性时，链接的 active属性会实效，解决的方法是，在页面unload时运行document.addEventListener(“touchstart”, function(){}, true);使active状态可用。（注：在小米系统下，点击链接仍然会出现红色的边框，各位同学如有解决方法，请赐教，不胜感激。）

5.关于调试；
把所有的页面放到一个文件夹中，页面 放在根目录下，工具也放在跟目录下，把你要调试的页面改成index.html。当然如果你有好几个页面，最好还是做一个index页面。启动调试器，用 手机访问你电脑的ip，要保证手机所用的wifi和pc的网络在一个网段）。用mac的同学就到网上找一篇localhost的配置方法，开启以下这个功 能就可以访问了。

Html5 手机网站input设置为type=number的问题
h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。
问题一的解决办法：

1
<input name="" type="number" oninput="checkTextLength(this,11)"/>
function checkTextLength(obj,leng){
	if(obj.value.length>leng){
		obj.value=obj.value.substr(0,leng);
		//obj.value=obj.value.substring(0,leng);
		}
}

问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：

问题三，去除input默认样式
使用方法如下：

1
.elmClass{
   -webkit-appearance:none;
   -moz-appearance:none;
   appearance:none;
}

使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格，其实我们可以反过来思路，使用“appearance”属性，来改变任何元素的浏览器默认风格，简单的说，你可以使用“appearance”属性将“段落p”渲染成button的风格，也可以渲染成“输入框”、“选择框”等效果。

通过transform进行skew变形，rotate旋转会造成出现锯齿现象。
解决办法如下：

1
.bianxing{
	-webkit-transform:skew(10deg) rotate(-4deg) translateZ(0);
	transform:skew(10deg) rotate(-4deg) translateZ(0);
	outline: 1px solid rgba(255,255,255,0);
}

移动端 HTML5 audio autoplay 失效问题
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：

1
document.addEventListener("touchstart",function(){
	document.getElementsByTagName('audio')[0].play();  //播放
	document.getElementsByTagName('audio')[0].pause(); //暂停
});
//附上移动端视频全屏播放代码：
<video class="video-box" data-index="3" id="video1" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" src="music/guo111.mp4"></video>

设置input的placeholder内容样式的方法

1
input::-webkit-input-placeholder{
color:#999;
font-size: 14px;
}

禁止用户选中文字-webkit-user-select:none
允许用户复制：-webkit-user-select:auto。必须用在块元素有效。

移动端点透问题的解决办法：
点透，就是在元素绑定 tap 事件，进行元素的隐藏或移动位置时，其底下的元素刚好绑定click事件或有web响应的元素时，会触发底下元素的响应，形成穿透一样的效果，我们也称之为点透。在使用zepto的tap 方法时，就会发生点透现象。
解决方法：
1、不要使用 click 事件，用 tap 代替
2、使用 fastclick库

移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。

响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点：

样式表里的媒体查询格式为：
@media screen and (max-width:960px){}

响应式web设计之流式布局：
流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变 化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。

响应式web设计之液态图片：
要实现液态图片，只需加入如下代码：img{max-width:100%;}

web移动头部书写

1
<meta name="keywords" content="首页关键字" />
<meta name="description" content="首页描述" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon-precomposed" sizes="48×48" href="/images/48×48.png" />
<link rel="apple-touch-icon-precomposed" sizes="72×72" href="/images/72×72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="/images/114×114.png" />
缓存控制
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=300"/>
下面这行:
<meta http-equiv="Cache-Control" content="max-age=0"/>
与下面一行有相同的效果:
<meta http-equiv="Cache-Control" content="no-cache"/>
HTTP刷新
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="refresh" content="15"/>
clearType字体
<mete HTTP-EQIV="cleartype" CONTENT="ON|OFF">
定义页面尺寸
IE的使用:
<meta NAME="MobileOptimized" CONTENT="240">
其他使用:
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

320px是iPhone设备的竖屏尺寸，480是iPhone设备横向屏幕尺寸，768px是iPad竖向屏幕尺寸，等等
/ 桌面第一风格:避免 /

1
.column {
    float: left;
    width: 50%;
}
@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}
/* 先动先行的风格： FTW */
@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

断点变量看起来像这样：
$bp-small : 24em;
$bp-med : 46.8em;
$bp-large : 50em;
$bp-xl : 73em;

Sass中，我在主要断点之间插入了次要断点，类型于：
$bp-small : 24em;
$bp-small-2 : 29.75em;
$bp-small-3 : 39.8em;
$bp-med : 46.8em;
$bp-med-2 : 48em;
$bp-large : 50em;
$bp-large-2 : 54.5em;
$bp-xl : 60em;
$bp-xl-2 : 67em;

@media all and (min-width: 50em) {…}
有很多媒体特性我们可以检测，包括颜色、颜色指数、纵横比、宽度以及装置设备宽度、高度和设计高度、方位、单色、分辨率、扫描、像素密度等等。
使用pix-density可以有条件的提供更大的背景图、视网膜图标和高分辨率屏幕；
使用height可以检测可用的屏幕高度，并调整相应的样式风格。例如，在这个网站我想根据高度来扩展我的标题类型；
使用orientation来检测屏幕是横向还是纵向模式。取向可以用于有条件的禁用固定定位，并释放出屏幕可用空间。

1
if (window.matchMedia("(min-width: 40em)").matches) {
/* load secondary stuff */
}

自适应图片
img {
max-width: 100%;
height: auto;
}

是HTML5一个新的元素。
如果元素与当前的

基本工作步骤如下：
创建标签。
在这些标签内创建一个你想用来执行任何一个特性的元素。
添加一个media属性，用来包含你想要的特性，如视口的当前高度(viewport height)，宽度(width)，方向(orientation)等。
添加一个srcset属性与相应的图像文件名相匹配，进行加载。如果你想提供不同的像素密度，例如Retina显示屏，你可以添加额外的文件名到你的srcset属性中，
添加一个回退的元素。

这里有一个简单的基本的例子，用来检查视口是否小于768px，如果小于的话就加载一个较小的图像：

1
<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>
如果您想为更高密度的显示器提供不同分辨率的图像版本，可以通过在srcset属性中添加额外的文件名来实现。例如，让我们来看看屏幕像素密度为2x的Retina 代码处理片断：
<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <source srcset="default.jpg, default_retina.jpg 2x">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>
<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">
设置width为100%，然后max-width是1000px，那么内容会填满屏幕，但是不会超过1000px。

.content{
  width: 80%; /* 960 */
  width: calc( 100% - 15em ); /* 240 */
  float: left;
  background: #8ac233;
}
.sidebar{
  width: 16.666%; /* 200 */
  width: calc( 12.5em ); /* 200 */
  float: right;
  background: #8ac233;
}

就像其他的一些CSS特性，calc()还是一个实验属性，在特定的浏览器下还需要添加特定的前缀。让更多的浏览器得到支持：

1
.content{
  width: 80%; /* 960 */
  width: -webkit-calc( 100% - 15em ); /* 240 */
  width: calc( 100% - 15em ); /* 240 */
  float: left;
  background: #8ac233;
}
.sidebar{
  width: 16.666%; /* 200 */
  width: -webkit-calc(12.5em); /* 200 */
  width: calc(12.5em); /* 200 */
  float: right;
  background: #8ac233;
}

除了使用rem以外，还可以使用CSS3的vh和vw
vw代表viewport宽度的1%，即viewport宽度被划分为100份，1vw代表1份的宽度。
vh是高度。规律跟vw一样。
wmin是vh和vw中较小者；vmax是vh和vw中较大者

body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
　　font-size: 1.5em;
　　}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
　　　font-size: 0.875em;
　　}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

ios 上 1px边框的问题完美解决（1px变2px， 又被 initial-scale=0.5 缩小了一半）

设计稿上，div高度为40px；那么css就是 div {height: 0.4rem;}

1
@media screen and (min-width: 320px) {
    html {
        font-size: 50px;
    }
}
@media screen and (min-width: 360px) {
    html {
        font-size: 56px;
    }
}
@media screen and (min-width: 400px) {
    html {
        font-size: 63px;
    }
}
@media screen and (min-width: 440px) {
    html {
        font-size: 69px;
    }
}
@media screen and (min-width: 480px) {
    html {
        font-size: 75px;
    }
}

@media screen and (min-width: 640px) {
    html {
        font-size: 100px;
    }
}

html {
    font-size: 15.625vw;
}



html {
    font-size: 31.25vw; /* 表达式：100*100vw/320 */
}
@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

去除webkit的滚动条
element::-webkit-scrollbar{
display: none;
}

在div里的滚动如丝般顺滑：
-webkit-overflow-scrolling : touch`;

去除button在ios上的默认样式
-webkit-appearance: none;
border-radius: 0

placeholder元素样式的修改
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

使用图片时，会发现图片下总是有大概4px的空白,常用解决方法有
img{display:block}；
img{vertical-align:top}

关于使用弹性盒子box布局
display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 过渡版本
display:-webkit-flex; // 最新的版本
对于第一种常见用法是：

1
<ul class="box">
    <li class="box_flex">1</li>
    <li class="box_flex">2</li>
    <li class="box_flex">3</li>
</ul>
.box {
    display: -webkit-box;
    -webkit-box-align: center; // 设置里面的元素垂直居中 
    -webkit-box-pack: center; // 设置水平居中
}
.box .box_flex1 {
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    display: block;
    width: 0;//关键
}

对两个div使用了transform之后，div下的z-index有时就会失效,把z-index提高就好了

在iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。当focus时就把它设为absolute，视情况而定，也有比如显示一个新的层，将含有fixed按钮的那一层隐藏的情况等等。

当把input设为 width:100%时，有时可能会遇到input的宽度超出了屏幕，这时可对input加一个属性 box-sizing:border-box
关于box-sizing:border-box，此属性是把边框的宽度和padding包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就可以完美地让它们能显示在同一行

做一个方向箭头比如 “>” 时，可以用一个正方形的div，设置border:1px 1px 0 0；然后rotate(45deg)

用rem布局时，由于webkit支持的最小字体大小是12px，所以使用html使用62.5%实际是12px，这样很难计算，做法是设置成625%即100px，然后1rem就相当于100px

移动端字体使用 font-family: Helvetica,sans-serif

实现毛玻璃效果，透过背景看其他元素模糊，自身元素不模糊。
-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);
这个效果暂时只有IOS9上的safari可以。
用css3的blur效果的话，是整层元素全部模糊，而透过模糊层看其他的元素不模糊

如果需要展示小于12px的文字，用transform:scale(%);它将元素缩小，但本身应该占的空间并不会变小，所以比如要元素居左对齐的话，还需设置translateX

在移动端对input框使用disabled属性，会导致元素里面value值在页面上被隐藏看不见，可以对元素使用css3效果pointer-event:none，意思就是此元素对鼠标事件无效

zepto的tap事件有一个事件穿透的问题。假如你tap一个弹出层元素（这个元素遮罩了一个a标签），这个元素立即消失，这样由于上述的0.3s延迟tap事件就会传递给a标签成click事件造成a标签跳转。
以上面的例子来说，解决方案视情况而定：
tap时让遮罩渐隐消失，这个过程超过400ms就不会穿透到下一层去了
在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。（这个没用过）
有的时候比如弹出一个iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定touchend也是和tap差不多的效果

当弹窗出现时，想禁止屏幕的滑动，给那个遮罩层添加touchmove事件即可，用e.preventDefault()会阻止的scroll，click等事件，消失时再off掉，
$(“.body_cover”).on(“touchmove”, function(e) {
e.preventDefault();
});

使用input file上传文件时，可以指定接受的类型，accept=”image/png,image/jpeg,image/gif”，同时在android上默认不能使用相机,可以加capture=”camera”
同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。

给元素加:active伪类时，如果要求高，兼容性好的话，就得用js监控touchstart然后加相应的class

1
$(document).on("touchstart", function(e) {
    var target = $(e.target);
    if (target.hasClass("is_hover")) {
        target.addClass("hover_css");
    }
});

判断是否来自微信浏览器

1
function isFromWeiXin() {
   var ua = navigator.userAgent.toLowerCase();
   if (ua.match(/MicroMessenger/i) == "micromessenger") {
       return true;
   }
   return false;
}

判断手机的类型

1
var user="";
if (/android/i.test(navigator.userAgent)){
　　      //  android
    user="1";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){
    //  ios
    user="0";
}

微信jssdk里预览图片接口，图片的url不能填base64编码，ios上会很卡，估摸着微信得卡个5秒左右才打得开，而android上压跟就卡住或者一直卡在读取图片界面

微信当在输入框里输入消息时，会提示警示框不要输入qq密码等，这个可以在公众平台的功能设置的业务域名设置

微信里假如页面一使用ajax获取数据，当你进入下一页面再按返回键返回页面一的时候，有些情况不会去请求ajax数据，会使用缓存，然而ajax来的数据又并没有存在缓存里。要设置cache:false（iphone、android的某些手机都可能出现）

rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子：

1
html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

10px = 1rem 在根元素（font-size = 10px的时候）；
20px = 1rem 在根元素（font-size = 20px的时候）；
40px = 1rem 在根元素（font-size = 40px的时候）；

1
html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important;
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important;
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important;
    }
}

上面的做的设置当然是不能所有设备全适配，但是用JS是可以实现全适配。具体用哪个就要根据自己的实际工作场景去定了。

1
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

http-equiv:
该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
最常见的大概属于Content-Type了，设置编码类型。如


H5中可以简化为


http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。
Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过期时间
last-modified : 页面最后生成时间
expires : 设置 cache 过期时间
cache-control : 设置文档的缓存机制
…
name:
该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport；

移动端特有属性
viewport

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

1
<meta name="format-detection" content="telephone=no" />
IOS私有属性
apple-mobile-web-app-capable
启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。
<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style
在webapp模式下，改变顶部状态条的颜色。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
default(白色，默认) | black(黑色) | black-translucent(半透明)
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度， Retina 屏幕为 40px ）。
webapp对应的Link标签
apple-touch-icon
在webapp下，指定放置主屏幕上 icon 文件路径;
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2；
如没有一致尺寸的图标，会优先选择比推荐尺寸大，但是最接近推荐尺寸的图标。
ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png
apple-touch-startup-image

在 webapp 下，设置启动时候的界面;
<link rel="apple-touch-startup-image" href="/startup.png" />
不支持 size 属性，可以使用 media query 来控制。iphone 和 touch 上，图片大小必须是 230*480 px,只支持竖屏;
其它meta
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">