retina图片兼容性这个特性不仅要关注手机，PC也要关注，因为苹果不仅在手机上（从iphone4开始），在MAC上也用到了Retina。首先，retina指的是dpr（device-pixel-ratio）是普通屏幕的两倍。和css相比，css中原来设置的是1px，在实际屏幕上显示也是一样的1px。但是在retina下，css的1px是实际屏幕的2px。这样做的结果是：有的同学会想，为什么会这样呢？名字看起来一样大，为什么图片模糊了？这其实就是Bitmap的特性。比如一个大小为200×300的jpg文件。那么它的实际屏幕像素就是200px×300px。放在dpr=1的屏幕上，大小设置为：width:200px;height:300px;当然是可以正常显示的。但是在retina中，每个csspx等于px的2倍。这样，原来正常显示的图像就翻倍了。原图上的每个点都可以准确的放在dpr=1的画面中，当dpr=2时，每个点都被分割了，所以会出现锯齿和模糊。有很多解决方案。使用媒体查询的方法适合添加背景图片。使用的是css3提供的device-pixel-ratio查询来执行。一个简单的demo是：#myimage{width:400px;height:300px;background:url(lo-res.jpg)00no-repeat;}//这个主要针对一些Android设备是@mediascreenand(-webkit-min-device-像素比：1.5），屏幕和（最小--moz-设备像素比：1.5），屏幕和（-o-min-device-pixel-ratio：1.5），屏幕和（-o-min-device-pixel-ratio:1.5),ratio:3/2),screenand(min-device-pixel-ratio:1.5){#myimage{background-image:url(hi-res.jpg);}}//如果要针对苹果，可以直接使用：@mediaonlyscreenand(-webkit-device-pixel-ratio:2),onlyscreenand(-moz-device-pixel-ratio:2),onlyscreenand(-o-device-pixel-ratio:2/1),onlyscreenand(device-pixel-ratio:2){#myimage{background-image:url(hi-res.jpg);}}但是像这样成本非常高，每次都需要准备两份来做一些低价值的工作。使用js判断除了上面写多余的css代码，还可以使用js判断。然后，将data-src中的内容替换为Lazyloading.if(window.devicePixelRatio>1){varimages=$("img");images.each(function(i){varx1=$(this).attr('data-src');$(this).attr('src',x1);});}而且这个属性的支持度还是挺高的，基本上所有的移动端和pc都支持，除了IE8。使用矢量图在网络上使用矢量图有很多种方法。例如，SVG、字体。这两个应该是最合适的，但是画图的时候，大部分都是位图的形式，所以转换成SVG和字体有点困难。对于一些小的logo和图标，还是没有太大问题的。而且，以上两种方法占用的空间也很小。手机基本情况现在手机的问题不在js脚本，而是在页面渲染。因为手机的屏幕显示都是由CPU处理的。没有像PC端那样专用于绘制图像的独立显卡。手机上的键盘一般都会遇到需要输入的元素标签，比如当input获得焦点时，会触发键盘的弹出。但是对于ios和Android来说，两种键盘弹窗的处理是不一样的。ios键盘的键盘渲染有两种方式：如果input已经在键盘上方，则只会将control往上推一点，推断出键盘上方。如果输入在键盘下方，键盘将覆盖它控件，并将整个页面向上推，直到控件被推到键盘上方。另外在ios7上点击的时候，如果有固定属性的元素。那么，此时打开键盘，fixed可能会呈现为absolute。所以，这确实是个问题。android键盘也有两种情况。第一没有问题。第二种，当输入在键盘下方时，整个文档的高度会增加，直到控件的高度超过键盘的高度。对于android将整个文档向上推时，绝对定位和固定属性定位都会存在一定的问题。增加文档不会增加视口的位置，因此如果您使用fixed，元素可能会出现在键盘下方。但是，由于键盘在整个浏览器之上，你不可能把键盘盖住。一般的解决方案是监听输入焦点事件动态设置固定位置。（但这很复杂）。软盘类型是针对不同的输入，键盘上显示的类型其实是不同的。一般来说，兼容性更好：号码/电话号码。可以设置为：input[type=tel]input[type=number]手动弹出软盘时用户没有触发输入的焦点事件。它是由开发人员手动触发的。这里有两种不同的情况。在IOSios6之前，当控件触发focus事件，但是用户没有触发focus时，键盘是不会弹出的。ios6以后可以手动添加autofocus属性。Android只要不是被用户触发，就无法被弹回。键盘的收回可以直接触发js的blur事件。页面滚动设计是为了页面滚动有两个事件，一个是scroll，一个是touchmove。为了解决手机端的性能问题，当页面滚动时，js动态渲染是无效的，即用js改变页面元素的位置是无效的。这种作用主要体现在滚动事件触发的机制上。ios8以下，页面滚动时，js的渲染暂停。但是对于Android4.0及以上版本，滚动触发是连续的Scrolling。如果你想设置部分滚动，你可以添加-webkit-溢出滚动：触摸css属性。flex问题由于历史原因，如果想在web端实现flex的效果，需要注意其兼容性，因为flex有三个版本，三个版本的支持是不一样的。它们是：display:boxdisplay:flexboxdisplay:flex由于Android使用Webkit开源内核，所以我们需要在flex上加上webkit前缀来兼容低版本的Android.display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;当前兼容性是：oldusesdisplay:box;tweener使用display:flexbox;newusesdisplay:flex;fixedprobleminmobile在里面使用fixed是比较复杂的问题。因为，在输入的时候，往往设计成弹出键盘。鉴于ios和android的不同效果，fixed在弹出键盘时可能会出现错位。例如：具体参考：fixed。fixed在ios5之前是不支持的，fixed基本上是android4.x之后才有的。触摸事件分辨率为300ms点击延迟点击延迟是web手机开发的坑。因为厂商在设计移动终端的时候，主要是考虑缩放。即：第一次点击时，不会触发点击时间，浏览器会等待300ms的延时，判断300ms内你是否再次点击，如果是，会触发放大的效果后来取消了300ms的延迟，同时也取消了长按选中文字。后来不行了，才加的。在Chrome32+中，IE/FF都可以。最近在IOS9.3也修复了。但是前期需要在head标签中添加。//告诉浏览器取消双击缩放的效果
