web前端 —— 挪动端学问的一些总结

2024年5月18日 206次阅读 来源: zzzddd

打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮引荐），比较缺人，时机多多！广告位长期有效，有兴致简历我邮箱：854936875@qq.com

个人在挪动端的一些总结归结，有新的知识点会一向更新

一.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）
弹性规划其他详解可见此

  1. 运用 a 标签的话，只管让 a 标签 block ，只管让用户可点击地区最大化
  2. 对两个div运用了transform以后，div下的z-index偶然就会失效，我碰到过，但没去仔细探讨，只是把z-index进步就好了，假如碰到这个题目的，细致能够 看这
  3. 在iOS中，当你点击比方 input 预备输入时，假造键盘弹出，全部视窗的 高度 就会变成 减去键盘 的高度，到场你在底部有fixed的元素比方btn，这个元素就会跑上来，平常都不会太雅观。我是当focus时就把它设为absolute，视状况而定，也有比方显现一个新的层，将含有fixed按钮的那一层隐蔽的状况等等。

别的一种状况（平常在页面内容很少时iphone5及以上常发作），当输入框弹出时fixed元素挤到输入框上，当输入框消逝机，fixed元素并没有跟着输入框的消逝而回到底部，这是因为全部视窗的高度还保持在 减去键盘的 高度，须要手动去触发让视窗高度回到平常，然后试了许多要领都没胜利，厥后的计划是输入框消逝机给页面加隐形的很大的padding比方1000px并在30ms后改成平常，细致可看这挪动端IOS关于fixed元素的题目

  1. 制止用户选中笔墨 -webkit-user-select:none
  2. 当把input设为 width:100%时，偶然能够会碰到input的宽度超出了屏幕，这时刻可对input加一个属性 box-sizing:border-box

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

  1. 做一个方向箭头比方 “>” 时，能够用一个正方形的div，设置border:1px 1px 0 0；然后rotate(45deg)，如许就省去了一个图片
  2. CSS权重：style是1000，id是100，class是10，一般如li、div和伪类是1，通用如*是0；
  3. 运用rem时，设某个div比方的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上能够会涌现显现不止两行,第三行会显现点头部。 处置惩罚：应用js猎取笔墨line-height再去设置div高度
  4. 运用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;我看这也是天猫运用的

  1. 在iphone原生键盘上用keyup统计字符数时，体系不会自动监控你挑选笔墨的事宜，比方打了多个拼音，能够挑选的现实笔墨比输入的字符数多或许少，但没法在用户肯定自身的输入时监控到keyup（其他事宜也一样）推断字符数。 改成input事宜就能够了

22.完成毛玻璃效果，透过背景看其他元素隐约，自身元素不隐约。

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

这个效果临时只要IOS9上的safari能够。
用css3的blur效果的话，是整层元素悉数隐约，而透过隐约层看其他的元素不隐约

  1. 假如须要展现小于12px的笔墨，用transform:scale(%);它将元素减少，但自身应当占的空间并不会变小，所以比方要元素居左对齐的话，还需设置translateX
  2. 在挪动端对input框运用disabled属性，会致使元素内里value值在页面上被隐蔽看不见，能够对元素运用css3效果pointer-event:none，意义就是此元素对鼠标事宜无效

二.js部份

  1. 假如运用jquery绑定touch事宜的话，猎取touchstart，touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX，

猎取touchend则用 e.originalEvent.changedTouches[0].pageX

  1. 应用style猎取猎取transform的rotate值

    parseInt(/rotateX((.*?))/.exec(getALL.style.webkitTransform)[1])

    假如页面一最先没有style值，rotate是写在CSS里的，须要用到getComputedStyle，细致请看这里

  2. 有些版本的iphone4中， audio和video默许播放事宜不会触发，比方运用window.onload或计时器等都不能触发播放，必须用JS写事宜让用户手动点击触发才会最先播放，比方

    $(document).one('touchstart',function(){
    audio.play();
})

  3. 想要在touchmove:function(e,参数一)加一个参数，效果直接运用e.preventDefault()就会 e 报错，处置惩罚要领为

    touchmove:function(e,参数一){
    　　var e=arguments[0]

      e.preventDefault()

    }

  4. 挪动端的一些小页面能够没必要用到zepto.js这些东西库，就能够运用一些新一点的api，比方拔取元素用querySelector(".class #id")和querySelectorAll(".class element"),操纵class能够用classList
  5. 点击一个元素时，运用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如许的花样

    原文作者：zzzddd
    原文地址: https://segmentfault.com/a/1190000003908191
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞