移动端遇到的问题

https://github.com/AlloyTeam/Mars
https://github.com/hoosin/mobile-web-favorites

跨域问题

手机浏览器也是浏览器，在ajax调用外部api的时候也存在跨域问题，这时候可以让后端加上两个http头

Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

第一个头可以避免跨域问题，第二个头可以方便ajax请求设置content-type等配置项

 

zepto使用当中遇到的问题

Zepto 源码中有 14 个模块，而官网提供的标准版里面只有 7 个模块！而且居然不包含对移动端开发非常重要的 touch 模块（提供对触摸事件的支持）！
所以我的建议是，不要从官网下载，而是从 Github 下载了源代码之后自己 Build 一个版本，这样你可以自行挑选适合的模块，下面说说我了解的一些模块

  • polyfill，zepto，detect，event，ajax，form，fx 这7个就是标准版包含的模块
  • fx_methods 有了这个模块之后，.show() .hide() 等几个方法才能支持动画了，比如 .show('fast')
  • data 提供对 .data() 方法的完整支持，像 jQuery 一样用内存对象存储
  • assets 移除 img 元素后做一些特殊处理，用来清理内存
  • selector 更多的选择器的支持，后面会提到
  • touch 对触摸事件的支持，比如 tap 事件

不要使用click事件而用tap事件

click 事件有 200~300 ms 的延迟，为了更快的响应，最好用 Zepto 提供的 tap 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成

zepto对css选择器的支持远不如jQuery

:text :checkbox :first 等等在 jQuery 里面很常用的选择器，Zepto 不支持！原因很简单，jQuery 通过自己编写的 sizzle 引擎来支持 CSS 选择器，而 Zepto 是直接通过浏览器提供的document.querySelectorAll 接口。这个接口只支持标准的 CSS 选择器，而上面提到的那些属于 jQuery 选择器扩展，所以仔细看看这个网页，注意一下这些选择器。

上面提到的 selector 模块，如果有这个模块的话，能够支持 部分 的 jQuery 选择器扩展，列举如下：

  • :visible :hidden
  • :selected :checked
  • :parent
  • :first :last :eq
  • :contains :has

元素的尺寸计算

Zepto 没有 .innerHeight() .outerWidth() 等四个方法，其次，它的 .height()/.width() 方法也不完善，对于display:none 的元素，计算出的高宽都是 0

为什么jQuery能够将display:none的元素计算出尺寸呢，查看源码可以发现原来是jQuery会先设置其css样式为

position: "absolute", visibility: "hidden", display: "block"

计算完高宽后再恢复

prop方法的缺陷

以为用下面这句代码可以实现把一个文本框设置为只读

$('#text').prop('readonly', true)

结果却发现只能写成如下才能工作：

$('#text').prop('readOnly', true)

那为什么jQuery运用上面一句照样也能工作呢，查看源码后发现原因很简单那就是

jQuery.each([
    "tabIndex",
    "readOnly",
    "maxLength",
    "cellSpacing",
    "cellPadding",
    "rowSpan",
    "colSpan",
    "useMap",
    "frameBorder",
    "contentEditable"
], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

使用fadeIn()方法替代show方法

Zepto 的 .show() 动画实现的很简单，没有高宽的变化，而是将透明度从 0 逐渐变为 1

如果没有 fx_mehods 模块的话，.show() 方法是不支持动画的，不过有了这模块后，动画的支持还是有点小问题，所以建议使用 .fadeIn() 方法来替代 .show()

CSS 3滤镜

-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);

 

交叉淡变

background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

 

iphone5媒体查询

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {/* iPhone 5 or iPod Touch 5th generation */}

使用媒体查询，提供不同的启动图片：

<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

 

andriod上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

 

移动端 HTML5 input date 不支持 placeholder 问题

input type date 的 placeholder 支持性有一定问题，因为浏览器会针对此类型 input 增加 datepicker 模块，看上去没那么必要支持 placeholder。对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式，iOS 上会有 datepicker 不会显示 placeholder 文字

解决方法很简单，先使其 type 为 text，此时支持 placeholder，当触摸或者聚焦的时候，使用 JS 切换使其触发 datepicker 功能

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

 

移动端 HTML5 audio autoplay 失效问题

由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放

解决方法很简单，先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});

 

touchmove事件的小细节 

通常情况下我们会这样

$('div').on('touchmove', function(){
   //.….code
});

如果中间的 code 需要处理的东西多的话，FPS(FPS代表每秒钟屏幕刷新的次数，当该参数变低时，会导致屏幕变卡、延迟出效果) 就会下降影响程序顺滑度，而如果改成如下这样会快很多（事实上你了解JS作用域链就会清楚原理  有兴趣可以看我另外一篇博文  里面有介绍到）

$('div').on('touchmove', function(){
   setTimeout(function(){
     //.….code
   },0);
});

 

禁止用户选中文字

-webkit-user-select:none

 

禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

 

禁止 iOS 识别长串数字为电话

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

 

  • 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。

  • 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。

不让 Android 手机识别邮箱

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

 

动画过程中动画闪白问题

使用 CSS3 动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。

-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

 

横竖屏会出现字体加粗不一致问题

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

 

伪类 :active 生效

要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件，像如下所示：

<style>
a {
  color: #000;
}
a:active {
  color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
  document.addEventListener('touchstart',function(){},false);
</script>
posted @ 2015-07-02 20:05  静逸  阅读(1993)  评论(1)  编辑  收藏  举报