手机端Web开发中遇到的问题有哪些

本篇文章给大家分享的是有关手机端Web开发中遇到的问题有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

白塔ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

 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  端一样有独立的显卡专门来对图像进行绘制.

手机上的键盘

一般遇到需要输入的元素标签, 比如, input 当获取焦点时, 都会触发键盘的弹出. 但, 对于 ios 和安卓,  这两者的键盘弹出的处理方式不一样.

ios 的键盘

键盘的渲染有两种方式:

• 如果 input 已经在键盘的上方, 则只是会将控件向上推一点, 推导键盘的上方.

• 如果 input 在键盘的下方,键盘会覆盖该控件, 并将整个页面向上推, 直到控件推到键盘上方为止.

另外, 当在 ios7 一下时, 如果有元素是 fixed 属性. 那么,此时打开 键盘时, fixed 有可能会当做 absolute 进行渲染.  所以, 这真是个问题.

android 的键盘

同样,也有两种情况.

• ***种没问题

• 第二种, 当 input 在键盘的下方, 会将整个 document 的高度增加, 直到控件高度超过键盘高度为止.

对于 android 将整个 document 向上推的情况, 对于绝对定位和 fixed 属性定位来说. 会存在一定的问题. 增加 document  并未增高 viewport 的位置, 所以, 如果使用 fixed 可能会出现, 元素跑到键盘下面. 但, 由于键盘是在整个浏览器上方的, 所以,  你也不可能覆盖掉键盘. 一般的解决办法就是, 监听输入的 focus 事件, 来动态 设置fixed 的位置.(不过好复杂).

软盘类型

针对于不同的输入,键盘上显示的类型实际上是不一样的, 一般兼容性比较好的是:数字/手机号. 可以设置为:

input[type=tel]  input[type=number]

软盘人工弹起

当用户没有触发 input 的 focus 事件. 而是开发者人工触发的, 这里就有两种不同的情况.

IOS

ios6 以前, 当控件触发了 focus 事件, 但, focus 不是用户触发的, 那么键盘是不会弹起的.

在 ios6 以后, 可以手动添加一个 autofocus 属性即可.

Android

只要不是用户触发的,都不能弹起.

键盘的收起

键盘的收起直接触发 js 的 blur 事件即可.

页面滚动

设计到页面滚动有两个事件, 一个是 scroll, 一个是 touchmove.

手机端为了解决性能问题, 当页面进行滚动时, js 进行的动态渲染是无效的, 即, 使用 js 改变页面上元素的位置,是无效的. 知道页面滚动结束才行.  这种效果主要体现在 scroll 事件触发的机制上. 在 ios8 以下, 当页面滚动时, js 的渲染被暂停了. 而,对于 Andriod 4.0 以上来说,  scroll 触发都是连续滚动的.

如果你想设置局部滚动, 可以添加 -webkit-overflow-scrolling: touch css 属性.

flex 问题

由于历史原因, 想在 web 上实现 flex 的效果. 则需要注意他的兼容性, 因为 flex 有三个版本,  而且三个版本的支持性都不一样.分别是:

• display: box

• display: flexbox

• display: flex

由于 Android 使用的是 Webkit 开源内核, 我们需要给 flex 加上 webkit 前缀, 来兼容 低版本 Android.

display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;

目前的兼容性是:

• old 使用的是 display: box;

• tweener 使用的是 display: flexbox;

• new 使用的是 display: flex;

fixed 问题

在 mobile 里面使用 fixed 是一个比较复杂的问题. 因为,在输入时, 往往还会设计到键盘的弹出, 鉴于 ios 和 android  的不同效果. fixed 有可能在键盘弹出时, 出现错位的现象. 例如:

具体参考: fixed. 在 ios5 以前是不支持 fixed, android 在 4.x 之后, fixed 基本上才可用.

touch 事件解析

300ms click 时延

click 时延算是, web 手机开发的一个坑吧. 因为厂商在设计手机端时, 主要, 考虑到缩放的事.

即:

当***次点击时, 并不会触发 click 时间, 浏览器会等待 300ms 时延, 并判断你在 300ms 内,有没有再次点击, 如果有, 则会触发  zoom in 的效果。 后来, 300ms 时延被取消了, 同时, 长按选中文本也取消了. 后来觉得不行, 又加上了. 在 Chrome 32+, IE/FF  都是 Ok的. 最近在 IOS 9.3 中也得到了修复.

不过前期是, 你需要在 head 标签里面加上.

// 告诉浏览器取消双击放大的效果  

或者给特定的 tag 加上特定的 css 属性

html {      touch-action: manipulation;  }

不过 FF 不支持.

click 点透

这个 feature 应该算是比较经典了. 当一个罩层覆盖在一个 a 标签上。