移动端H5网页开发的一些有用的知识

来源：lexintech.com 发布时间：2018-01-15

现在APP开发越来越多的采用原生+H5的混合模式，H5的技术和运用已经越来越成熟。今天给大家分享些非常有用的H5前端移动端的知识，对前端开发的程序员来说，应该会有一些帮助。

1.meta标签

移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面做了缩小优化，所以字体等都相应缩小了。

关于 initial-scale=1 ，这个参照iphone5的尺寸320568，如果你页面按照640*1136做的话，scale就设为0.5

2.图片尺寸

做全屏显示的图片时，一般为了兼容大部分的手机，图片尺寸一般设为 640*960

3.去除 webkit的滚动条

element::-webkit-scrollbar{display: none;}

如果要去除全部的，就把 element去掉同时这个属性可让在 div里的滚动如丝般顺滑： -webkit-overflow-scrolling : touch;

7.在移动端做动画效果的话，如果通过改变绝对定位的 top，或者 margin的话做出来的效果很差，很不流畅，而使用 css3的 transition、 transform或者 animation的效果将会非常棒（这一方面 IOS比 android又要好不少）。如果用 **3d（translate3d）来实现动画，会开启 GPU加速，动画会更加流畅，但硬件配置差的安卓用起来会耗很多性能

8.使用图片时，会发现图片下总是有大概 4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有

img{display:block}；img{vertical-align:top}

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

10.对两个div使用了 transform之后， div下的 z-index有时就会失效，我遇到过，但没去认真探究，只是把 z-index提高就好了

11.在 iOS中，当你点击比如 input准备输入时，虚拟键盘弹出，整个视窗的高度就会变为减去键盘的高度，加入你在底部有 fixed的元素比如 btn，这个元素就会跑上来，一般都不会太美观。我是当 focus时就把它设为 absolute

，视情况而定，也有比如显示一个新的层，将含有 fixed按钮的那一层隐藏的情况等等。另外一种情况（一般在页面内容很少时 phone5及以上常发生），当输入框弹出时 fixed元素挤到输入框上，当输入框消失时， fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在减去键盘的高度，需要手动去触发让视窗高度回到正常，然后试了很多方法都没成功，后来的方案是输入框消失时给页面加隐形的很大的padding比如 1000px并在 30ms后改为正常

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

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

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

14.做一个方向箭头比如 “>” 时，可以用一个正方形的 div，设置 border:1px1px00；然后 rotate(45deg)，这样就省去了一个图片

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

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

17.使用 background时， background-position里使用了比如 center left后不能再加具体的数值去定位，比如 center 10px left（暂时兼容性差）

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

19.移动端字体使用 font-family:Helvetica,sans-serif;我看这也是天猫使用的

20.在 iphone原生键盘上用 keyup统计字符数时，系统不会自动监控你选择文字的事件，比如打了多个拼音，可能选择的实际文字比输入的字符数多或者少，但无法在用户确定自己的输入时监控到 keyup（其他事件也一样）判断字符数。改成 input事件就可以了

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

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

这个效果暂时只有 IOS9上的 safari可以。用 css3的 blur效果的话，是整层元素全部模糊，而透过模糊层看其他的元素不模糊

22.如果需要展示小于 12px的文字，用 transform:scale(%);它将元素缩小，但本身应该占的空间并不会变小，所以比如要元素居左对齐的话，还需设置 translateX 23.在移动端对 input框使用 disabled属性，会导致元素里面 value值在页面上被隐藏看不见，可以对元素使用 css3效果 pointer-event:none，意思就是此元素对鼠标事件无效。

以上就是今天的分享，希望能对大家有所帮助。