移动端WEB开发常见问题小结

11、IOS里面fixed的文本框焦点居中

  1. <!DOCTYPE html>
  2.     <head>
  3.     input {
  4.        position:fixed;
  5.        top:0;left:0;
  6.     }
  7.     </head>
  8.     <body>
  9.         <div class="header">
  10.             <form action="">
  11.                 <label>Testfield: <input type="text" /></label>
  12.             </form>
  13.         </div>
  14.     </body>
  15. </html>

在ios里面，当一个文本框的样式为fixed时候，如果这个文本框获得焦点，它的位置就会乱掉，由于ios里面做了自适应居中，这个fixed的文本框会跑到页面中间。类似：

解决办法有两个： 可以在文本框获得焦点的时候将fixed改为absolute，失去焦点时在改回fixed，但是这样会让屏幕有上下滑动的体验不太好。

  1. .fixfixed {
  2.     position:absolute;
  3. }
  4. $(document)
  5.     .on('focus', 'input', function(e) {
  6.         $this.addClass('fixfixed');
  7.     })
  8.     .on('blur', 'input', function(e) {
  9.         $this.removeClass('fixfixed');
  10.     });

还有一种就是用一个假的fixed的文本框放在页面顶部，一个absolute的文本框隐藏在页面顶部，当fixed的文本框获得焦点时候将其隐藏，然后显示absolute的文本框，当失去焦点时，在把absolute的文本框隐藏，fixed的文本框显示。

  1. .fixfixed {
  2.     position:absolute;
  3. }
  4. $(document)
  5.     .on('focus', 'input', function(e) {
  6.         $absolute..show();
  7.         $this.hide();
  8.     })
  9.     .on('blur', 'input', function(e) {
  10.          $fixed..show();
  11.         $this.hide();
  12.     });

最后一种就是顶部的input不参与滚动，只让其下面滚动。、

12、position:sticky

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

  1. .sticky {
  2.     position: -webkit-sticky;
  3.     position:sticky;
  4.     top: 15px;
  5. }

浏览器兼容性： 由于这是一个全新的属性，以至于到现在都没有一个规范，W3C也刚刚开始讨论它，而现在只有webkit nightly版本和chrome 开发版(Chrome 23.0.1247.0+ Canary)才开始支持它。 另外需要注意的是，如果同时定义了left和right值，那么left生效，right会无效，同样，同时定义了top和bottom，top赢～～ 移动端点透事件 简单的说，由于在移动端我们经常会使用tap(touchstart)事件来替换掉click事件，那么就会有一种场景是：

  1. <div id="mengceng"></div>
  2. <a href="www.zkii.net">www.zkii.net</a>

div是绝对定位的蒙层z-index高于a，而a标签是页面中的一个链接，我们给div绑定tap事件：

  1. $('#mengceng').on('tap',function(){
  2. $('#mengceng').hide();
  3. });

我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。 原因： touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏，此时click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。

解决办法： 1 尽量都使用touch事件来替换click事件。 2 阻止a链接的click的preventDefault base64编码图片替换url图片 u在移动端，网络请求是很珍贵的资源，尤其在2g或者3g网络下，所以能不发请求的资源都尽量不要发，对于一些小图片icon之类的，可以将图片用base64编码，来减少网络请求。

13、手机拍照和上传图片：

  1. <!-- 选择照片 -->
  2. <input type=file accept="image/*">
  3. <!-- 选择视频 -->
  4. <input type=file accept="video/*">

关键在于input标签的accept属性。

14、动画效果时开启硬件加速：

我们在制作动画效果时经常会想要改版元素的top或者left来让元素动起来，在pc端还好但是移动端就会有较大的卡顿感，这么我们需要使用css3的 transform: translate3d;来替换， 此效果可以让浏览器开启gpu加速，渲染更流畅，但是笔着实验时在ios上体验良好，但在一些低端android机型可能会出现意想不到的效果。

15、快速回弹滚动：

在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

  1. .div {
  2.         overflow: auto;
  3.         -webkit-overflow-scrolling: touch;
  4.     }

经过测试，此效果在不同的ios系统表现不一致， 对于局部滚动，ios8以上，不加此效果，滚动的超级慢，ios8一下，不加此效果，滚动还算比较流畅 对于body滚动，ios8以上，不加此效果同样拥有弹性滚动效果。

16、ios和android局部滚动时隐藏原生滚动条：

Android源码：

  1. ::-webkit-scrollbar{
  2.     opacity: 0;
  3. }
  5. <p>ios 使用一个稍微高一些div包裹住这个有滚动条的div然后设置overflow:hidden挡住之</p>
  6. ```css
  7. .wrap{
  8.     height: 100px;
  9.     overflow: hidden;
  10. }
  11. .box{
  12.     width: 100%;
  13.     height: -webkit-calc(100% + 5px);
  14.     overflow-x: auto;
  15.     overflow-y: hidden;
  16.     -webkit-overflow-scrolling: touch;
  17. }
  18. <div class="wrap">
  19.     <div class="box"></div>
  20. </div>

17、设置placeholder时候 focus时候文字没有隐藏：

  1. input:focus::-webkit-input-placeholder{
  2.     opacity: 0;
  3. }
1 2 3
你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！