移动端填坑记录

·  阅读 67
移动端填坑记录

如果有滚动ios会连带着body一块滚动 可使用inobounce.js库解决

click事件 点击延迟 解决办法 使用clickfast.js

如果使用动画时出现手机渲染问题 可以加入这几个属性依次试一下

transform:translate3d(0,0,0);  // css3动画渲染加速
transform:scale(1.000000001);  // 扩大
transform:scale(0.999999999); // 缩小
backface-visibility: hidden;  // 隐藏动画
复制代码

filter可以给不规则图形加阴影

filter: drop-shadow(0 0 1.33vw rgba(0, 0, 0, 0.5)) 
复制代码

box-shadow 只能给规则图形加阴影

解决安卓手机圆角失效问题 border-radius: 2px; background-clip: padding-box;

解决ios input 默认圆角边框问题 border-radius: 0;

android软键盘弹出 会压缩布局问题 给被压缩的容器设置一个最小高度min-height

calc(四则运算)

用于动态计算长度值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则; 字体大小不要使用奇数字号,带小数点的更不要提了。也就是说需要被2整除的整数且不可小于12px

移动端input输入placeholder垂直不居中问题

在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height。但在pc端输入的时候会发现,虽然输入内容确实是垂直居中了,但是光标的位置是靠上的,导致感官上的不美观。于是对input设置的时候,首先确定字体的大小如font-size:16px,其次我们确定设计稿里input的高度,如input高度为40px,那么此时的代码应该是这样的:

input{
 height:16px;
 line-height:16px;
 padding:12px 0;
 border:1px solid #ddd;
}

复制代码

这样的代码在移动端无论是视觉还是输入时都是符合要求的。可是html5出来一个新属性,那就是placeholder,不得不说这个属性的出现解救了以往繁琐的js实现效果,但是,当你给input设置了placeholder后,在pc端看,好像是偏上了那么一点点,好像也不是很影响使用。但是在手机端浏览后,就会发现虽然输入文字可以垂直居中,placeholder里的内容明显的靠上,严重的不美观。 在网上查了一些资料,对于原理性的解释好像基本上没看到。但是国外的网站对这个属性给了一个默认的建议,那就是不要设计input的line-height或者设置line-height为normal,即可。 不过,又发现问题了,虽然在手机端正常,但是在pc端看的时候,placeholder还是有点偏下的感觉。强迫症害死人啊。。。那怎么办。。。设置line-height:1.5em,或者将em换算成实际的px也可以。 H5微信开发iOS 6.4.7真机上input调起软键盘后不回弹的解决方案

问题描述:input输入在iOS的微信中调起软键盘之后,输入完成收起软键盘的时候页面下方(原来软键盘的位置)有空白,这将导致下方fixed定位按钮失效等问题,解决方案:通过给input添加失去焦点事件,触发该事件的时候使页面自动滑动到顶部,亲测有效,代码如下:

$("input").blur(function(){
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
         }, 300);
 })
复制代码

关于移动端屏幕适配 使用vw单位 但是在pc端比例会比较大 建议在屏幕宽度比较大的情况下加上媒体查询 例如

@media screen and (min-width: 500px) {
  body {
    max-width: 500px;
    margin: auto;
    position: relative;
  }

  .wrapper {
    position: relative;
    height: 850px;
  }

  .wrapper form {
    height: 230px;
    box-shadow: 0 2.5px 17.5px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
  }

  .wrapper form .form-title {
    font-size: 22px;
  }

 }
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改