web前端 —— 移动端知识的一些总结

我的在移动端的一些总结概括，有新的知识点会一直更新

一.css部分

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）
弹性布局其余详解可见此

10. 使用 a 标签的话，尽可能让 a 标签 block ，尽可能让用户可点击区域最大化

11. 对两个div使用了transform以后，div下的z-index有时就会失效，我遇到过，但没去认真探究，只是把z-index提升就行了，若是遇到这个问题的，详细能够 看这

12. 在iOS中，当你点击好比 input 准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素好比btn，这个元素就会跑上来，通常都不会太美观。我是当focus时就把它设为absolute，视状况而定，也有好比显示一个新的层，将含有fixed按钮的那一层隐藏的状况等等。
另一种状况（通常在页面内容不多时iphone5及以上常发生），当输入框弹出时fixed元素挤到输入框上，当输入框消失时，fixed元素并无随着输入框的消失而回到底部，这是由于整个视窗的高度还保持在 减去键盘的 高度，须要手动去触发让视窗高度回到正常，而后试了不少方法都没成功，后来的方案是输入框消失时给页面加隐形的很大的padding好比1000px并在30ms后改成正常，具体可看这移动端IOS关于fixed元素的问题

13. 禁止用户选中文字 -webkit-user-select:none

14. 当把input设为 width:100%时，有时可能会遇到input的宽度超出了屏幕，这时可对input加一个属性 box-sizing:border-box

关于box-sizing:border-box，此属性是把边框的宽度和padding包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就能够完美地让它们能显示在同一行

15. 作一个方向箭头好比 “>” 时，能够用一个正方形的div，设置border:1px 1px 0 0；而后rotate(45deg)，这样就省去了一个图片

16. CSS权重：style是1000，id是100，class是10，普通如li、div和伪类是1，通用如*是0；

17. 使用rem时，设某个div好比的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。 解决：利用js获取文字line-height再去设置div高度

18. 使用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;我看这也是天猫使用的

21. 在iphone原生键盘上用keyup统计字符数时，系统不会自动监控你选择文字的事件，好比打了多个拼音，可能选择的实际文字比输入的字符数多或者少，但没法在用户肯定本身的输入时监控到keyup（其余事件也同样）判断字符数。 改为input事件就能够了

22.实现毛玻璃效果，透过背景看其余元素模糊，自身元素不模糊。

-webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(0,0,0,0.5);

 

这个效果暂时只有IOS9上的safari能够。
用css3的blur效果的话，是整层元素所有模糊，而透过模糊层看其余的元素不模糊

23. 若是须要展现小于12px的文字，用transform:scale(%);它将元素缩小，但自己应该占的空间并不会变小，因此好比要元素居左对齐的话，还需设置translateX

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

二.js部分

1. 若是使用jquery绑定touch事件的话，获取touchstart，touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX，
   获取touchend则用 e.originalEvent.changedTouches[0].pageX

2. 利用style获取获取transform的rotate值

   parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])
   
   若是页面一开始没有`style`值，`rotate`是写在`CSS`里的，须要用到`getComputedStyle`，具体请看[这里][5]

    

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()
   }

    

5. 移动端的一些小页面可能不必用到zepto.js这些工具库，就可使用一些新一点的api，好比选取元素用querySelector(".class #id")和querySelectorAll(".class element"),操做class能够用classList

6. 点击一个元素时，使用touchstart会当即触发，而使用click则用有大概0.3s的延迟
   想模拟一个当即触发的点击事件有两种方法，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差很少的效果

1. 当弹窗出现时，想禁止屏幕的滑动，给那个遮罩层添加touchmove事件便可，用e.preventDefault()会阻止的scroll，click等事件，消失时再off掉，

   $(".body_cover").on("touchmove", function(e) {
       e.preventDefault();
   });

    

2. 使用input file上传文件时，能够指定接受的类型，accept="image/png,image/jpeg,image/gif" ，同时在android上默认不能使用相机，能够加capture="camera"
   同时，因为原生的样式很差看，能够经过设置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");
        }
    });

 

3、微信部分

1. 判断是否来自微信浏览器

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

    

2. 判断手机的类型

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

    

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