移动前端常见问题

三种布局

1. 含最大最小宽度的百分比自适应布局
   使用场景：网站首页，图片较多的网站
2. 百分比自适应布局
   使用场景：信息文字较多的网站，内容较多
3. 全屏自适应布局
   单页面网页或者移动端webapp页面

Box-sizing在移动端的使用
在百分比定宽的页面经常使用

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

移动端事件
Touch

• touchstart：当手指触碰屏幕时候发生，不管当前多少手指。
• touchmove：当手指在屏幕上滑动时连续触发，通常我们在滑屏页面。会调用event的preventDefault()可以阻止默认情况的发生，组织页面的滚动。
• touchend：当手指离开屏幕时候触发
• touchcancel：系统停止跟踪触摸时候会发生（少用）

触摸事件的响应顺序
1.ontouchstart
2.ontouchmove
3.ontouchend
4onclick 300ms延时

Event
- originalEvent(原生事件)是jQuery封装的事件
- targetTouches 目标元素怒的所有当前触摸
- changeedTouches页面上最新更改的所有触摸
- touches页面上的所有触摸
- clientX，clientY相对于当前屏幕的X和Y位置
- pageX和pageY相对于整体页面的X和Y位置。
- transitionEnd 过渡结束事件
- animationEnd动画结束事件

移动端事件框架
例如zepto touch.js

常见移动端问题

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" contend="no-siteapp">

3..移动端手机号码识别
在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
• 7位数字，形如：1234567
• 带括号及加号的数字，形如：(+86)123456789
• 双连接线的数字，形如：00-00-00111
• 11位数字，形如：13800138000
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

<meta name="format-detection" contend="telephone=no">

开启电话功能

<a href="tel:1234567890">11111a>

开启短信功能

<a href="sms:1234567890">11111a>

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

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

通过标签属性开启长按邮箱地址弹出邮件发送的功能

<a mailto:"[email protected]">111@16.coma>

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.禁止选中内容

.user-select-none{-webkit-user-select:none;
}

9.禁止保存或拷贝图像（IOS）

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

10.摇一摇功能
h5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下运动加速度等数据。
11.Android去掉玉莹输入按钮

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