正文

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

IP云
IP云V管理员/3 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

个人在移动端的一些总结归纳，有新的知识点会一直更新

一.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");

        }

    });

三、微信部分

  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

相关阅读

目录[+]