0
点赞
收藏
分享

微信扫一扫

手机端页面在项目中遇到的一些问题及解决办法

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?

首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是: (1) 看是否能把body和html的height: 100%去除掉。 (2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch或者给body增加:body {overflow-x: hidden}。

2.IOS机型margin属性无效问题?

(1) 设置html body的高度为百分比时,margin-bottom在safari里失效 (2) 直接padding代替margin

3.Ios绑定点击事件不执行?

(1)添加样式cursor :pointer。点击后消除背景闪一下的css:-webkit-tap-highlight-color:transparent;

4.Ios键盘换行变为搜索?

  • 首先,input 要放在 form里面。
  • 这时 "换行" 已经变成 “前往”。
  • 如果想变成 “搜索”,input 设置 type="search"。


5.transform属性影响position:fixed?

(1)规范中有规定:如果元素的transform值不为none,则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上,电脑上也一样。除了fixed元素会受影响之外,z-index(层叠上下文)值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素.

举报

相关推荐

0 条评论