总结：本文总结了web移动端的常见问题并附上解决方案，包括：Meta标签、获取滚动条的值、禁止选择文本、屏蔽阴影、css之border-box、css3多文本换行、Retina屏幕高清图片、html5重力感应事件、移动端touch事件、单击延迟等 ...

Meta标签：

1 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

　　这个想必大家都知道，当页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。

1 <meta content="telephone=no" name="format-detection" />
2 <meta content="email=no" name="format-detection" />

　　这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制。

　　获取滚动条的值：

1 window.scrollY  window.scrollX

　　桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢?因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢?就是上面两个属性，但是事实证明android也支持这属性，所以索性都用woindow.scroll.

　　禁止选择文本：

1 -webkit-user-select:none

　　禁止用户选择文本，ios和android都支持

　　屏蔽阴影：

1 -webkit-appearance:none

　　亲测，可以同时屏蔽输入框怪异的内阴影，解决iOS下无法修改按钮样式，测试还发现一个小问题就是，加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改。

　　css之border-box：

1 element{
2         width: 100%;
3         padding-left: 10px;
4         box-sizing:border-box;
5         -webkit-box-sizing:border-box;
6         border: 1px solid blue;
7 }

　　那我想要一个元素100%显示，又必须有一个固定的padding-left/padding-right，还有1px的边框，怎么办?这样编写代码必然导致出现横向滚动条，肿么办?要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性，对于这个属性的具体解释不做赘述(想深入了解的同学可以到w3school查看，要知道自己动手会更容易记忆)。让我们看看如何解决上面的问题：

　　css3多文本换行：

1 p {
2     overflow : hidden;
3     text-overflow: ellipsis;
4     display: -webkit-box;
5     -webkit-line-clamp: 2;
6     -webkit-box-orient: vertical;
7 }

　　Webkit支持一个名为-webkit-line-clamp的属性，参见链接，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。需要注意的是display需要设置成box，-webkit-line-clamp表示需要显示几行。

　　Retina屏幕高清图片：

1 selector {
2   background-image: url(no-image-set.png);
3   background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
4 }

　　image-set的语法，类似于不同的文本，图像也会显示成不同的：

  1. 　不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像;
  2. 　支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像;
  3. 　Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。

　　html5重力感应事件：

01 if (window.DeviceMotionEvent) {
02                  window.addEventListener('devicemotion',deviceMotionHandler, false); 
03         }
04         var speed = 30;//speed
05         var x = y = z = lastX = lastY = lastZ = 0;
06         function deviceMotionHandler(eventData) { 
07           var acceleration =event.accelerationIncludingGravity;
08                 x = acceleration.x;
09                 y = acceleration.y;
10                 z = acceleration.z;
11                 if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
12                     //简单的摇一摇触发代码
13                     alert(1);
14                 }
15                 lastX = x;
16                 lastY = y;
17                 lastZ = z;
18         }

　　关于deviceMotionEvent是HTML5新增的事件，用来检测手机重力感应效果具体可参考http://w3c.github.io/deviceorientation/spec-source-orientation.html

　　移动端touch事件：

  • 　　touchstart //当手指接触屏幕时触发
  • 　　touchmove //当已经接触屏幕的手指开始移动后触发
  • 　　touchend //当手指离开屏幕时触发
  • 　　touchcancel//当某种touch事件非正常结束时触发

　　这4个事件的触发顺序为：

　　touchstart -> touchmove -> touchend ->touchcancel

　　对于某些android系统touch的bug:

　　比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove ，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现，当时解决办法就是用settimeout来稀释touchmove。

　　单击延迟：

　　click 事件因为要等待双击确认，会有 300ms 的延迟，体验并不是很好。

　　开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。

　　Creating Fast Buttons for Mobile Web Applications

　　Eliminate 300ms delay on click events in mobile Safari

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

01 <!DOCTYPE html>
02     <head>
03     input {
04        position:fixed;
05        top:0;left:0;
06     }
07     </head>
08     <body>
09         <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，但是这样会让屏幕有上下滑动的体验不太好。

01 .fixfixed {
02 position:absolute;
03 }
04 $(document)
05     .on('focus', 'input', function(e) {
06         $this.addClass('fixfixed');
07     })
08     .on('blur', 'input', function(e) {
09         $this.removeClass('fixfixed');
10     });

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

01 .fixfixed {
02 position:absolute;
03 }
04 $(document)
05     .on('focus', 'input', function(e) {
06         $absolute..show();
07         $this.hide();
08     })
09     .on('blur', 'input', function(e) {
10          $fixed..show();
11         $this.hide();
12     });

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

　　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   
3 <a href="www.qq.com">www.qq.com</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编码，来减少网络请求。

　　手机拍照和上传图片

　　<input type=”file”>的accept 属性

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

　　动画效果时开启硬件加速

　　我们在制作动画效果时经常会想要改版元素的top或者left来让元素动起来，在pc端还好但是移动端就会有较大的卡顿感，这么我们需要使用css3的 transform: translate3d;来替换，

　　此效果可以让浏览器开启gpu加速，渲染更流畅，但是笔着实验时在ios上体验良好，但在一些低端android机型可能会出现意想不到的效果。

　　快速回弹滚动

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

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

　　经笔者测试，此效果在不同的ios系统表现不一致：

  • 　　对于局部滚动，ios8以上，不加此效果，滚动的超级慢，ios8一下，不加此效果，滚动还算比较流畅
  • 　　对于body滚动，ios8以上，不加此效果同样拥有弹性滚动效果。

　　持续更新中。。

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

　　android

1 ::-webkit-scrollbar{
2     opacity: 0;
3 }

　　ios

　　使用一个稍微高一些div包裹住这个有滚动条的div然后设置overflow:hidden挡住之

01 .wrap{
02     height: 100px;
03     overflow: hidden;
04 }
05 .box{
06     width: 100%;
07     height: -webkit-calc(100% + 5px);
08     overflow-x: auto;
09     overflow-y: hidden;
10     -webkit-overflow-scrolling: touch;
11 }
12 <div class="wrap">
13     <div class="box"></div>
14 </div>

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

1 input:focus::-webkit-input-placeholder{
2     opacity: 0;
3 }

　　移动端不同的input对应不同的键盘展示样式

　　ios —- android

　　type email

　　type url

　　type tel

　　type search

　　 参考资料：http://www.nihaoshijie.com.cn/index.php/archives/455

　　 来源：AlloyTeam：http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/

web移动端常见问题解决方案 (转)的更多相关文章

  1. 允许浏览器跨域访问web服务端的解决方案

    今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的. 所谓跨域访问,就是在浏览器窗口,和某个服务端通 ...

  2. php 允许浏览器跨域访问web服务端的解决方案

    今天和同事探讨了前后端如何真正实现隔离开发的问题,如果前端单独作为服务发布,势必会涉及到无法直接调用后端的接口的问题,因为浏览器是不允许跨域提交请求的. 所谓跨域访问,就是在浏览器窗口,和某个服务端通 ...

  3. Web移动端常见问题

    一.按钮点击时出现黑色背景 解决方法: .class { -webkit-tap-highlight-color:rgba(0,0,0,0);} .class { -webkit-appearance ...

  4. Web移动端常见问题-摘抄

      一.按钮点击时出现黑色背景 解决方法: 1 2 .class { -webkit-tap-highlight-color:rgba(0,0,0,0);} .class { -webkit-appe ...

  5. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  6. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  7. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  8. Diy页面服务端渲染解决方案

    1. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...

  9. web移动端开发经验总结

    整理web移动端开发经验,部分内容借鉴于网上的博文. 1.meta标签 <meta name="viewport" content="width=device-wi ...

随机推荐

  1. 使用reqire.js 生成二维码

    最新项目中使用到 reqiure.js  ; 使用了一个月的感觉是: 这个确实是一个利器,如果会使用的话,能轻易理顺js之间的依赖关系,从而可以重复使用js,可以减少代码量,可以提升开发速度,但是  ...

  2. bzoj 3295: [Cqoi2011]动态逆序对（树套树 or CDQ分治）

    Description 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计 ...

  3. Logger之Logger.getLogger(CLass)技巧代替system.out.print

    ---恢复内容开始--- 尊重原创:http://www.cnblogs.com/zxf330301/p/5876117.html 之前一直在使用System.out.println()来调试.但是用 ...

  4. [国嵌攻略][060][LCD工作原理解析]

    LCD硬件体系 1.LCD液晶屏 液晶属于一种有机化合物,分子形状为长棒状,在不同的电流作用下,分子会有规律旋转,这样对光线产生一定的控制形成一个像素,而很多像素右可以构成完整的图像. LCD是Liq ...

  5. 遍历Map集合：java.util.Map.Entry、KeySet两种方式

    遍历Map集合的两种方式: 1.用KeySet Map.keySet(),返回一个存放所有key的set集合,通过遍历集合,根据key值取出所有的value值. Map<String,Strin ...

  6. 算法-java代码实现堆排序

    堆排序 第7节 堆排序练习题 对于一个int数组,请编写一个堆排序算法,对数组元素排序. 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例: [1,2,3,5,2,3],6 [1,2 ...

  7. Composer 是什么

    简单来说,Composer 是一个新的安装包管理工具,服务于 PHP 生态系统.它实际上包含了两个部分:Composer 和 Packagist.下面我们就简单说一下他们各自的用途. Composer ...

  8. JavaSE笔记-泛型

    定义带泛型的类 public class Cat<T> { //可以用T定义实例变量 private T name; //可以用T定义形参 //构造器没有<> public C ...

  9. DALI解码模块

    DALI-MOD2接口模块使用手册 一.概述(联系人:张先生,电话:13923882807,QQ:813267849) 一.概述 欢迎使用本公司的DALI解码模块,该模块支持"DALI第一套 ...

  10. 02 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之Service层

    作者:nnngu 项目源代码:https://github.com/nnngu/nguSeckill 首先在编写Service层代码前,我们应该首先要知道这一层到底是干什么的. Service层主要负 ...