手机端Web开发中遇到的那些问题.docVIP

手机端Web开发中遇到的那些问题 / 邮件群发 ?retina 图片兼容 这个 feature 应该不仅仅只关心 手机端, 而且还包括PC, 因为苹果不仅仅在手机端 (从 iphone4 开始), 而且在, MAC 上也使用了 retina. 首先, retina 的意思就是, dpr(device-pixel-ratio)是普通屏幕的两倍. 对比于 CSS 来说就是, 原来在 css 中设置的是 1px , 在实际的屏幕显示时, 也是 1px. 但是, 在 retina 下, css 的 1px 就是实际屏幕的 2px. 这样的结果就是: 有同学会想, 会啥会这样呢? 命名看起来大小一样的, 为什么图片变模糊了?这实际上是位图的特性. 比如一个 jpg 文件, 大小是 200×300. 那么他的实际屏幕像素就是 200px × 300px. 放在 dpr=1 的屏幕中, 大小设置为: width:?200px;? ? height:300px;?? 这样, 当然可以正常显示. 但在 retina 中, 每个 css px 等于 2 倍的 px. 这样, 原来正常显示的图片就被放大了一倍. 原来图片上每个点,可以正好的放在 dpr=1 的屏幕中, 而在 dpr=2 时, 每个点都被拆分了, 所以就有锯齿造成模糊的现象. 而解决办法也有很多. 使用 media query 这种方法适用于背景图的添加. 使用到的是 css3 提供的 device-pixel-ratio query 来进行执行. 简单的demo就是: #myimage?{? ????width:?400px;? ????height:?300px;? ????background:?url(lo-res.jpg)?0?0?no-repeat;? }? ? //?这里主要针对的是?Android?的一些设备? @media? screen?and?(-webkit-min-device-pixel-ratio:?1.5),? screen?and?(min--moz-device-pixel-ratio:?1.5),? screen?and?(-o-min-device-pixel-ratio:?3/2),? screen?and?(min-device-pixel-ratio:?1.5)?{? ????#myimage?{? ????????background-image:?url(hi-res.jpg);? ????}? }? ? //?如果你想针对苹果的,?则可以直接使用:? @media?only?screen?and?(-webkit-device-pixel-ratio:?2),? ???????only?screen?and?(-moz-device-pixel-ratio:?2),? ???????only?screen?and?(-o-device-pixel-ratio:?2/1),? ???????only?screen?and?(device-pixel-ratio:?2)?{? ????????#myimage?{? ????????background-image:?url(hi-res.jpg);? ????}? }?? 但这样成本很大, 而且每次都需要准备两份, 做一些价值特别低的工作. 使用 js 判断 除了上面写冗余的 css 代码外, 还可以使用 js 进行判断. 然后,替换 data-src 里面的内容进行懒加载. if?(window.devicePixelRatio??1)?{? ????????var?images?=?$(img);? ????????images.each(function(i)?{? ????????????var?x1?=?$(this).attr(data-src);? ????????????$(this).attr(src,x1);? ????????});? ????}?? 而且,该属性的支持度挺高的, 基本上所有的手机端和PC 都支持, 除了 IE8. 使用矢量图 在 web 中使用矢量图的方式有很多. 比如, SVG, Fonts. 这两个, 应该是最适合的, 不过, 在画图时, 大多都是位图的形式, 所以, 需要转换为 SVG 和 fonts 来说, 难度有点大. 针对一些小的 logo 和 icon 来说, 还是没太大的问题的. 并且, 上述的两种方式所占用的空间大小也是很小的. 手机基本情况 现在手机的问题不在 js 脚本, 而在页面渲染. 因为, 手机的屏幕显示全是通过 CPU 进行处理. 而没有像 PC 端一样有独立的显卡专门来对图像进行绘制. 手机上的键盘 一般遇到需