移动端遇到的问题

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>

你可能感兴趣的:(移动端)