转
web前端 — 移动端知识的一些总结
个人在移动端的一些总结归纳，有新的知识点会一直更新
一.css部分
1.用transition做动画时，变形尽量通过transform来实现，而不是用height，width等属性。transform可明显减少重绘、重画
1.meta标签
-
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
-
移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页
-
放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应缩小了
-
（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。
-
-
关于 initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5
-
<meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允许全屏浏览
-
-
<meta content="black" name="apple-mobile-web-app-status-bar-style"> IOS中Safari顶端状态条样式
-
-
<meta content="telephone=no" name="format-detection"> 忽略将数字变为电话号码
-
-
<meta content="email=no" name="format-detection"> 忽略识别email
2.图片尺寸
做全屏显示的图片时，一般为了兼容大部分的手机，图片尺寸一般设为640*960（我是觉得这个尺寸好，也看不少的图片也是这个尺寸，视情况而定）
3.去除webkit的滚动条
-
element
::-webkit-scrollbar{
-
display: none;
-
}
-
如果要去除全部的，就把`
element`去掉
-
同时这个属性可让在`
div`里的滚动如丝般顺滑：`
-webkit-overflow-scrolling :
touch`;
4.去除button在ios上的默认样式
-
-webkit-appearance:
none;
-
border-radius:
0
5.placeholder元素样式的修改
-
input
::-webkit-input-placeholder{
color:red;}
-
input
:focus
::-webkit-input-placeholder{
color:green;}
6.不想让按钮touch时有蓝色的边框或半透明灰色遮罩（根据系统而定）
-webkit-tap-highlight-color:rgba(0,0,0,0);
7.在移动端做动画效果的话，如果通过改变绝对定位的top，或者margin的话做出来的效果很差，很不流畅，而使用css3的transition、transform或者animation的效果将会非常棒（这一方面IOS比android又要好不少）。
如果用**3d（translate3d）来实现动画，会开启GPU加速，动画会更加流畅，但硬件配置差的安卓用起来会耗很多性能
8.使用图片时，会发现图片下总是有大概4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有
-
img{
display:block}；
-
img{
vertical-align:top}
也可取其他几个值，视情况而定
其他解决办法 见此
9.关于使用弹性盒子box布局
暂时有三种方案：
-
display:-webkit-box;
// 早期的版本
-
display:-webkit-box-flex;
// 过渡版本
-
display:-webkit-flex;
// 最新的版本
我暂时使用的是 display:-webkit-box;暂时只有这个的兼容性最好，flex是最好用，还可以如float一样排多个元素时自动换行，只是兼容性还太差，（即使是第一种，在火狐下兼容性也不是很好）
对于第一种常见用法是：
-
<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;
-
}
要想三个li元素平分box的宽度，width:0是关键（在这个坑里陷了好久，直到偶然的一次设置了width：0突然就好了，后来在天猫上也看到了同样的设置width:0）
弹性布局其他详解可见此
- 使用
a标签的话，尽量让a标签block，尽量让用户可点击区域最大化 - 对两个
div使用了transform之后，div下的z-index有时就会失效，我遇到过，但没去认真探究，只是把z-index提高就好了，如果遇到这个问题的，详细可以 看这 - 在
iOS中，当你点击比如input准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定，也有比如显示一个新的层，将含有fixed按钮的那一层隐藏的情况等等。
另外一种情况（一般在页面内容很少时iphone5及以上常发生），当输入框弹出时fixed元素挤到输入框上，当输入框消失时，fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在 减去键盘的 高度，需要手动去触发让视窗高度回到正常，然后试了很多方法都没成功，后来的方案是输入框消失时给页面加隐形的很大的padding比如1000px并在30ms后改为正常，具体可看这移动端IOS关于fixed元素的问题
- 禁止用户选中文字
-webkit-user-select:none - 当把
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)，这样就省去了一个图片 CSS权重：style是1000，id是100，class是10，普通如li、div和伪类是1，通用如*是0；- 使用
rem时，设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。 解决：利用js获取文字line-height再去设置div高度 - 使用
background时，background-position里使用了比如center left后不能再加具体的数值去定位，比如center 10px left（暂时兼容性差）
19.使用rem布局时，由于webkit支持的最小字体大小是12px，所以使用html使用62.5%实际是12px，这样很难计算，我的做法是设置成625%即100px，然后1rem就相当于100px
20.移动端字体使用 font-family: Helvetica,sans-serif;我看这也是天猫使用的
- 在
iphone原生键盘上用keyup统计字符数时，系统不会自动监控你选择文字的事件，比如打了多个拼音，可能选择的实际文字比输入的字符数多或者少，但无法在用户确定自己的输入时监控到keyup（其他事件也一样）判断字符数。 改成input事件就可以了
22.实现毛玻璃效果，透过背景看其他元素模糊，自身元素不模糊。
-
-webkit-backdrop-filter:
saturate(180%)
blur(20
px);
-
background:
rgba(0,0,0,0
.5);
这个效果暂时只有IOS9上的safari可以。
用css3的blur效果的话，是整层元素全部模糊，而透过模糊层看其他的元素不模糊
- 如果需要展示小于
12px的文字，用transform:scale(%);它将元素缩小，但本身应该占的空间并不会变小，所以比如要元素居左对齐的话，还需设置translateX - 在移动端对
input框使用disabled属性，会导致元素里面value值在页面上被隐藏看不见，可以对元素使用css3效果pointer-event:none，意思就是此元素对鼠标事件无效
二.js部分
- 如果使用
jquery绑定touch事件的话，获取touchstart，touchmove的触点坐标用e.originalEvent.targetTouches[0].pageX，
获取touchend则用 e.originalEvent.changedTouches[0].pageX
- 利用
style获取获取transform的rotate值<p>parseInt(/rotateX((.*?))/.exec(getALL.style.webkitTransform)[1])</p> <p>如果页面一开始没有<code>style</code>值，<code>rotate</code>是写在<code>CSS</code>里的，需要用到<code>getComputedStyle</code>，具体请看<a href="http://segmentfault.com/q/1010000002512591?_ea=121887" rel="nofollow" data-token="78ad34468d523b35ed3dac7ac19823f8">这里</a></p> </li> <li> <p>有些版本的<code>iphone4</code>中， <code>audio</code>和<code>video</code>默认播放事件不会触发，比如使用<code>window.onload</code>或计时器等都不能触发播放，必须用<code>JS</code>写事件让用户手动点击触发才会开始播放，比如</p> <pre class="has" name="code"><code class="hljs javascript"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">$(<span class="hljs-built_in">document</span>).one(<span class="hljs-string">'touchstart'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> audio.play();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">})</div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre> </li> <li> <p>想要在<code>touchmove:function(e,参数一)</code>加一个参数，结果直接使用<code>e.preventDefault()</code>就会 <code>e</code> 报错，处理方法为</p> <p>touchmove:function(e,参数一){<br> var e=arguments[0]</p> <pre class="has" name="code"><code class="hljs css"><span class="hljs-selector-tag">e</span><span class="hljs-selector-class">.preventDefault</span>()</code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre> <p>}</p> </li> <li>移动端的一些小页面可能没必要用到<code>zepto.js</code>这些工具库，就可以使用一些新一点的<code>api</code>，比如选取元素用<code>querySelector(".class #id")</code>和<code>querySelectorAll(".class element")</code>,操作<code>class</code>可以用<code>classList</code></li> <li>点击一个元素时，使用<code>touchstart</code>会立即触发，而使用<code>click</code>则用有大概<code>0.3s</code>的延迟</li>
想模拟一个立即触发的点击事件有两种方法，fastclick.js和zepto.js里的tap事件。
不过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掉，<pre class="has" name="code"><code class="hljs javascript"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">$(<span class="hljs-string">".body_cover"</span>).on(<span class="hljs-string">"touchmove"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> e.preventDefault();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">});</div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre> </li> <li>使用<code>input file</code>上传文件时，可以指定接受的类型，<code>accept="image/png,image/jpeg,image/gif"</code> ，同时在<code>android</code>上默认不能使用相机，可以加<code>capture="camera"</code></li>
同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。
9.给元素加:active伪类时，如果要求高，兼容性好的话，就得用js监控touchstart然后加相应的class
-
-
```
-
$(document).on(
"touchstart",
function(e) {
-
var target = $(e.target);
-
if (target.hasClass(
"is_hover")) {
-
target.addClass(
"hover_css");
-
}
-
});
-
```
三、微信部分
-
判断是否来自微信浏览器
<pre class="has" name="code"><code class="hljs javascript"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isFromWeiXin</span>(<span class="hljs-params"></span>) </span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> ua = navigator.userAgent.toLowerCase();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span> (ua.match(<span class="hljs-regexp">/MicroMessenger/i</span>) == <span class="hljs-string">"micromessenger"</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre> </li> <li> <p>判断手机的类型</p> <pre class="has" name="code"><code class="hljs javascript"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">var</span> user=<span class="hljs-string">""</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/android/i</span>.test(navigator.userAgent)){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// android</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> user=<span class="hljs-string">"1"</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/ipad|iphone|mac/i</span>.test(navigator.userAgent)){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// ios</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> user=<span class="hljs-string">"0"</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li></ol></code><div class="hljs-button {2}" data-title="复制" onclick="hljs.copyCode(event)"></div></pre> </li>
3.如果在网页里嵌套一个iframe，src为其他的网址等，当在微信浏览器打开时，如果iframe里的页面过大，则iframe的src不能加载（具体多大不知道，只是遇到过）。
4.微信jssdk里预览图片接口，图片的url不能填base64编码，ios上会很卡，估摸着微信得卡个5秒左右才打得开，而android上压跟就卡住或者一直卡在读取图片界面
5.微信当在输入框里输入消息时，会提示警示框不要输入qq密码等，这个可以在公众平台的功能设置的业务域名设置
6.微信里假如页面一使用ajax获取数据，当你进入下一页面再按返回键返回页面一的时候，有些情况不会去请求ajax数据，会使用缓存，然而ajax来的数据又并没有存在缓存里。要设置cache:false（iphone、android的某些手机都可能出现）
7.在微信js config的时候，如果URL的参数有如?a={"param": "1"},会导致签名失败。给参数用encodeURIComponent编码后再传过去也是失败！研究了好久。（后台代码没做任何修改，只在我前端修改代码）。所以最后还是使用了?param=1这样的格式
转载自：https://segmentfault.com/a/1190000003908191
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
