第135天：移动端开发经验总结

一、移动端三种布局

　　1、有最大、最小宽度的百分比自适应布局

　　适用场景：门户网站首页，图片较多的首页。

　　2、百分比自适应布局

　　适用场景：信息文字较多的网页，内容较多网页。

　　3、全屏自适应布局

　　适用场景：单页面网页，移动web app 页面。

二 、Box-sizing在移动端的使用

　　在百分比定宽的页面经常使用。

*,
::before,
::after{
    -webkit-box-sizing: border-box;
/*以你的border开始计算你的宽度*/
}

三、 移动端事件

1、Touch

touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，

会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

touchend：当手指离开屏幕时触发

touchcancel：系统停止跟踪触摸时候会触发。

例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick  300ms延时

2、Event

originalEvent （原生事件） 是jquery 封装的事件。

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

clientX、clientY 相对于当前屏幕的X或Y位置

pageX、pageY 相对于整体页面的X或Y位置

transitionEnd 过渡结束事件。

animationEnd 动画结束事件

3、移动端事件框架

例如 zepto  touch.js

'swipe',

'swipeLeft',

'swipeRight',

'swipeUp',

'swipeDown', 'doubleTap',

 'tap',

'singleTap',

'longTap'

都是由我们的原生touch事件封装的。

四、常见的移动端问题

1、什么是Retina 显示屏，带来了什么问题

　　retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

　　在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。

　　那么，前端的应对方案是：

　　设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

　　//例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

　　其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

　.css{font-size:20px}

2、 百度禁止转码

　　通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

3、移动端手机号码识别（IOS）

　　在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

• 7位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双连接线的数字，形如：00-00-00111
• 11位数字，形如：13800138000

　　可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

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

　　开启电话功能

<a href="tel:123456">123456</a>

　　开启短信功能：

　<a href="sms:123456">123456</a>

4、 移动端邮箱识别（Android）

　　与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

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

　　同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

　<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

5、 ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

        ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。

{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

6、 webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

7、 禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {

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

}

8、移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {

  -webkit-user-select: none;

｝

9、 如何禁止保存或拷贝图像（IOS）

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像 或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img { -webkit-touch-callout: none; }

10、摇一摇功能

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

11、 android 上去掉语音输入按钮

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

12、移动端基础框架

zepto.js语法与jquery几乎一样，会jquery基本会zepto；

搭配

backbone underscore

http://daneden.github.io/animate.css/ 动画css