• 欢迎来到本博客,希望可以y一起学习与分享

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

html/css benz 来源:web前端 —— 移动端知识的一些总结 2年前 (2017-12-27) 230次浏览 1个评论 扫描二维码
文章目录[隐藏]

一.css部分

1.用transition做动画时,变形尽量通过transform来实现,而不是用height,width等属性。transform可明显减少重绘、重画

1.meta标签

2.图片尺寸

做全屏显示的图片时,一般为了兼容大部分的手机,图片尺寸一般设为640*960(我是觉得这个尺寸好,也看不少的图片也是这个尺寸,视情况而定)

3.去除webkit的滚动条

4.去除button在ios上的默认样式

5.placeholder元素样式的修改

6.不想让按钮touch时有蓝色的边框或半透明灰色遮罩(根据系统而定)

7.移动端做动画效果

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

8.解决图片下总是有大概4px的空白

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

也可取其他几个值,视情况而定
其他解决办法 见此

9.关于使用弹性盒子box布局

关于使用弹性盒子box布局
暂时有三种方案:

我暂时使用的是 display:-webkit-box;暂时只有这个的兼容性最好,flex是最好用,还可以如float一样排多个元素时自动换行,只是兼容性还太差,(即使是第一种,在火狐下兼容性也不是很好)
对于第一种常见用法是:

要想三个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布局

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

20.移动端字体使用 font-family: Helvetica,sans-serif;

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

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

22.实现毛玻璃效果

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

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

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

二.js部分

1.jquery绑定touch事件

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

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

利用style获取获取transform的rotate值

如果页面一开始没有style值,rotate是写在CSS里的,需要用到getComputedStyle,具体请看这里

3.有些版本的iphone4中, audio和video默认播放事件不会触发

有些版本的iphone4中, audio和video默认播放事件不会触发,比如使用window.onload或计时器等都不能触发播放,必须用JS写事件让用户手动点击触发才会开始播放,比如

4. 在touchmove:function(e,参数一)加一个参数

想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为

5.模拟一个立即触发的点击事件

移动端的一些小页面可能没必要用到zepto.js这些工具库,就可以使用一些新一点的api,比如选取元素用querySelector(“.class #id”)和querySelectorAll(“.class element”),操作class可以用classList

点击一个元素时,使用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掉,
  2. 使用input file上传文件时,可以指定接受的类型,accept=”image/png,image/jpeg,image/gif” ,同时在android上默认不能使用相机,可以加capture=”camera”

同时,由于原生的样式不好看,可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。

9.给元素加:active伪类时,如果要求高,兼容性好的话,就得用js监控touchstart然后加相应的class

三、微信部分

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

2. 判断手机的类型

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这样的格式


文章 web前端 —— 移动端知识的一些总结 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 这干货,涨姿势了 :mrgreen: :wink:
    我是路人甲2017-12-27 15:01 Windows 7 | Chrome 55.0.2883.87